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

import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from './menu'
import { Button } from './button'

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => (
    <Menu>
      <MenuTrigger render={<Button variant="ghost">Open</Button>} />
      <MenuContent>
        <MenuItem>First</MenuItem>
        <MenuSeparator />
        <MenuItem>Second</MenuItem>
      </MenuContent>
    </Menu>
  ),
  play: async ({ canvas, userEvent }) => {
    await userEvent.click(canvas.getByRole('button', { name: 'Open' }))
    await expect(
      await within(document.body).findByText('First'),
    ).toBeInTheDocument()
  },
}
