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

const meta = {
  title: "UI/Skeleton",
  component: Skeleton,
  tags: ["autodocs"],
  parameters: componentDoc("Skeleton"),
} satisfies Meta<typeof Skeleton>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => ({
    components: { Skeleton },
    template: '<Skeleton class="h-4 w-48" />',
  }),
}

export const Text: Story = {
  name: "Text Lines",
  render: () => ({
    components: { Skeleton },
    template: `
      <div class="space-y-2 w-80">
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-5/6" />
        <Skeleton class="h-4 w-2/3" />
      </div>
    `,
  }),
}

export const Card: Story = {
  name: "Card Placeholder",
  render: () => ({
    components: { Skeleton },
    template: `
      <div class="space-y-3 w-80 rounded-lg border p-4">
        <Skeleton class="h-32 w-full" />
        <Skeleton class="h-5 w-3/4" />
        <Skeleton class="h-4 w-full" />
        <Skeleton class="h-4 w-5/6" />
      </div>
    `,
  }),
}

export const Avatar: Story = {
  name: "Avatar Placeholder",
  render: () => ({
    components: { Skeleton },
    template: `
      <div class="flex items-center gap-3">
        <Skeleton class="h-10 w-10 rounded-full" />
        <div class="space-y-2">
          <Skeleton class="h-4 w-32" />
          <Skeleton class="h-3 w-24" />
        </div>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Skeleton },
    template: `
      <div class="space-y-6">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Text</h3>
          <div class="space-y-2 w-80">
            <Skeleton class="h-4 w-full" />
            <Skeleton class="h-4 w-5/6" />
            <Skeleton class="h-4 w-2/3" />
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">User row</h3>
          <div class="flex items-center gap-3">
            <Skeleton class="h-10 w-10 rounded-full" />
            <div class="space-y-2">
              <Skeleton class="h-4 w-40" />
              <Skeleton class="h-3 w-28" />
            </div>
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Card</h3>
          <div class="space-y-3 w-80 rounded-lg border p-4">
            <Skeleton class="h-32 w-full" />
            <Skeleton class="h-5 w-3/4" />
            <Skeleton class="h-4 w-full" />
          </div>
        </section>
      </div>
    `,
  }),
}
