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",
  },
}