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

const meta = {
  title: "Elements/Display/TypeDisplay",
  component: TypeDisplay,
  tags: ["autodocs"],
  args: {
    value: "The quick brown fox jumps over the lazy dog.",
    contentType: "paragraph",
  },
  parameters: componentDoc("TypeDisplay", { barrel: "display" }),
  decorators: [
    () => ({
      template: '<div class="max-w-prose p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof TypeDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { value: "The quick brown fox jumps over the lazy dog." },
}

export const WithCustomContent: Story = {
  args: { value: "Custom inline content." },
}

export const Variants: Story = {
  args: {} as never,
  render: () => ({
    components: { TypeDisplay },
    setup() {
      const variants = [
        "heading-1",
        "heading-2",
        "heading-3",
        "heading-4",
        "heading-5",
        "heading-6",
        "paragraph",
        "lead",
        "small",
        "caption",
        "code",
        "quote",
      ] as const
      return { variants }
    },
    template: `
      <div class="flex flex-col gap-3">
        <TypeDisplay
          v-for="v in variants"
          :key="v"
          :content-type="v"
          :value="'Sample content (' + v + ')'"
        />
      </div>
    `,
  }),
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { TypeDisplay },
    template: `
      <div class="flex flex-col gap-4">
        <TypeDisplay content-type="heading-1" value="Showcase Heading" />
        <TypeDisplay content-type="lead" value="A lead paragraph that introduces the section." />
        <TypeDisplay content-type="paragraph" value="Body paragraph content. Lorem ipsum dolor sit amet." />
        <TypeDisplay content-type="quote" value="A pithy quote, attributed." />
        <TypeDisplay content-type="code" value="const x = 1;" />
      </div>
    `,
  }),
}
