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

const meta = {
  title: "UI/Separator",
  component: Separator,
  tags: ["autodocs"],
  parameters: componentDoc("Separator"),
  argTypes: {
    orientation: {
      control: "select",
      options: ["horizontal", "vertical"],
      description: "Layout direction of the separator.",
    },
    decorative: {
      control: "boolean",
      description:
        "When true (default), the separator is purely visual. Set to false to expose role=\"separator\" for assistive tech.",
    },
  },
  args: { orientation: "horizontal", decorative: true },
} satisfies Meta<typeof Separator>

export default meta
type Story = StoryObj<typeof meta>

export const Horizontal: Story = {
  render: (args) => ({
    components: { Separator },
    setup() {
      return { args }
    },
    template: `
      <div class="w-80 space-y-3">
        <div class="text-sm font-medium">Title</div>
        <Separator v-bind="args" />
        <div class="text-sm text-muted-foreground">Body text below the divider.</div>
      </div>
    `,
  }),
}

export const Vertical: Story = {
  render: () => ({
    components: { Separator },
    template: `
      <div class="flex h-16 items-center gap-4 text-sm">
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Source</span>
        <Separator orientation="vertical" />
        <span>Issues</span>
      </div>
    `,
  }),
}

export const BetweenItems: Story = {
  name: "Between Items",
  render: () => ({
    components: { Separator },
    template: `
      <div class="w-80 rounded-md border bg-card text-card-foreground">
        <div class="px-4 py-3 text-sm">Profile</div>
        <Separator />
        <div class="px-4 py-3 text-sm">Settings</div>
        <Separator />
        <div class="px-4 py-3 text-sm">Logout</div>
      </div>
    `,
  }),
}

export const Decorative: Story = {
  name: "Decorative vs Semantic",
  render: () => ({
    components: { Separator },
    template: `
      <div class="space-y-4">
        <div>
          <div class="mb-1 text-xs uppercase opacity-60">Decorative (default)</div>
          <Separator />
        </div>
        <div>
          <div class="mb-1 text-xs uppercase opacity-60">Semantic (role=&quot;separator&quot;)</div>
          <Separator :decorative="false" />
        </div>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Separator },
    template: `
      <div class="space-y-8">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Horizontal</h3>
          <div class="w-96">
            <div class="text-sm">Above</div>
            <Separator class="my-3" />
            <div class="text-sm">Below</div>
          </div>
        </section>

        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Vertical</h3>
          <div class="flex h-12 items-center gap-3 text-sm">
            <span>One</span>
            <Separator orientation="vertical" />
            <span>Two</span>
            <Separator orientation="vertical" />
            <span>Three</span>
          </div>
        </section>

        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">List dividers</h3>
          <div class="w-72 rounded-md border bg-card text-card-foreground text-sm">
            <div class="px-3 py-2">Account</div>
            <Separator />
            <div class="px-3 py-2">Billing</div>
            <Separator />
            <div class="px-3 py-2">Team</div>
          </div>
        </section>
      </div>
    `,
  }),
}
