import type { Meta, StoryObj } from "@storybook/vue3-vite"
import IconDisplay from "./IconDisplay.vue"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "Elements/Display/IconDisplay",
  component: IconDisplay,
  tags: ["autodocs"],
  args: { iconName: "Check", size: 20 },
  parameters: componentDoc("IconDisplay", { barrel: "display" }),
  decorators: [
    () => ({
      template: '<div class="p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof IconDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { iconName: "Check" },
}

export const WithCustomContent: Story = {
  args: { iconName: "Bell" },
}

export const KebabCaseInput: Story = {
  args: { iconName: "alert-circle" },
}

export const Large: Story = {
  args: { iconName: "Star", size: 48 },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { IconDisplay },
    setup() {
      const icons = ["Check", "Bell", "Star", "Heart", "Mail", "User", "Settings"]
      return { icons }
    },
    template: `
      <div class="flex flex-wrap items-center gap-4">
        <IconDisplay
          v-for="name in icons"
          :key="name"
          :icon-name="name"
        />
      </div>
    `,
  }),
}
