import type { Meta, StoryObj } from '@storybook/react-vite'
import { expect } from 'storybook/test'

import { Highlight } from './highlight'

const PRE = '\x02'
const POST = '\x03'

const meta = {
  component: Highlight,
  tags: ['ai-generated'],
} satisfies Meta<typeof Highlight>

export default meta
type Story = StoryObj<typeof meta>

export const PlainText: Story = {
  args: { text: 'cast bronze with green patina' },
}

export const Marked: Story = {
  args: { text: `cast ${PRE}bronze${POST} with green patina` },
  play: async ({ canvas }) => {
    const mark = canvas.getByText('bronze')
    await expect(mark.tagName).toBe('MARK')
  },
}

export const MultipleMarks: Story = {
  args: { text: `${PRE}cast${POST} bronze with ${PRE}green${POST} patina` },
  play: async ({ canvas }) => {
    await expect(canvas.getByText('cast').tagName).toBe('MARK')
    await expect(canvas.getByText('green').tagName).toBe('MARK')
  },
}