import type { Meta, StoryObj } from '@storybook/nextjs-vite'
import { expect } from 'storybook/test'
import { InfoBox, Props } from './InfoBox'
import { IconName } from '../Icons/iconName'

const meta: Meta<typeof InfoBox> = {
  title: 'Core Components/InfoBox',
  component: InfoBox,
  parameters: {
    layout: 'padded',
  },
  tags: ['autodocs'],
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    theme: 'Default',
    icon: IconName.Accessibility,
    heading: 'Heading',
    text: 'This is an informational message',
  },
  argTypes: {
    icon: {
      control: { type: 'select' },
      options: Object.values(IconName),
    },
    theme: {
      control: { type: 'select' },
      options: ['Default', 'SAS-Blue'] satisfies Props['theme'][],
    },
  },

  play: async ({ canvas, args }) => {
    const article = await canvas.findByRole('article')
    await expect(article).toBeVisible()

    const heading = await canvas.findByRole('heading', { name: args.heading })
    await expect(heading).toBeVisible()

    const paragraph = await canvas.findByText(args.text)
    await expect(paragraph).toBeVisible()
  },
}

export const WithoutIcon: Story = {
  args: {
    heading: 'Heading',
    text: 'This is an informational message',
  },
}