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

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { value: "GXP-12345" },
}

export const WithCustomContent: Story = {
  args: { value: "PRODUCT-78910" },
}

export const Ean13: Story = {
  args: { value: "5901234123457", format: "EAN13" },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { BarcodeDisplay },
    template: `
      <div class="flex flex-col gap-6">
        <BarcodeDisplay value="ABC-123" />
        <BarcodeDisplay value="987654321" />
      </div>
    `,
  }),
}
