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

const meta = {
  title: "UI/Avatar",
  component: Avatar,
  tags: ["autodocs"],
  parameters: componentDoc("Avatar"),
  argTypes: {
    size: {
      control: "select",
      options: ["sm", "default", "lg", "xl"],
      description: "Avatar size.",
    },
  },
  args: { size: "default" },
} satisfies Meta<typeof Avatar>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (args) => ({
    components: { Avatar, AvatarImage, AvatarFallback },
    setup() {
      return { args }
    },
    template: `
      <Avatar v-bind="args">
        <AvatarImage src="https://i.pravatar.cc/100" alt="User" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
    `,
  }),
}

export const WithImage: Story = {
  name: "With Image",
  render: () => ({
    components: { Avatar, AvatarImage, AvatarFallback },
    template: `
      <Avatar>
        <AvatarImage src="https://i.pravatar.cc/200" alt="Profile" />
        <AvatarFallback>AB</AvatarFallback>
      </Avatar>
    `,
  }),
}

export const FallbackOnly: Story = {
  name: "Fallback Only",
  render: () => ({
    components: { Avatar, AvatarFallback },
    template: `
      <Avatar>
        <AvatarFallback>FB</AvatarFallback>
      </Avatar>
    `,
  }),
}

export const Sizes: Story = {
  name: "Sizes",
  render: () => ({
    components: { Avatar, AvatarFallback },
    template: `
      <div class="flex flex-wrap items-end gap-3">
        <Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
        <Avatar size="default"><AvatarFallback>MD</AvatarFallback></Avatar>
        <Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
        <Avatar size="xl"><AvatarFallback>XL</AvatarFallback></Avatar>
      </div>
    `,
  }),
}

export const Group: Story = {
  name: "Group (Stacked)",
  render: () => ({
    components: { Avatar, AvatarFallback, AvatarImage },
    template: `
      <div class="flex -space-x-2">
        <Avatar class="ring-2 ring-background">
          <AvatarImage src="https://i.pravatar.cc/100?img=1" />
          <AvatarFallback>A</AvatarFallback>
        </Avatar>
        <Avatar class="ring-2 ring-background">
          <AvatarImage src="https://i.pravatar.cc/100?img=2" />
          <AvatarFallback>B</AvatarFallback>
        </Avatar>
        <Avatar class="ring-2 ring-background">
          <AvatarImage src="https://i.pravatar.cc/100?img=3" />
          <AvatarFallback>C</AvatarFallback>
        </Avatar>
        <Avatar class="ring-2 ring-background">
          <AvatarFallback>+5</AvatarFallback>
        </Avatar>
      </div>
    `,
  }),
}

export const Showcase: Story = {
  name: "Showcase",
  render: () => ({
    components: { Avatar, AvatarFallback, AvatarImage },
    template: `
      <div class="space-y-6">
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Sizes</h3>
          <div class="flex items-end gap-3">
            <Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
            <Avatar size="default"><AvatarFallback>MD</AvatarFallback></Avatar>
            <Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
            <Avatar size="xl"><AvatarFallback>XL</AvatarFallback></Avatar>
          </div>
        </section>
        <section>
          <h3 class="mb-3 text-sm font-semibold opacity-70">Stacked</h3>
          <div class="flex -space-x-2">
            <Avatar class="ring-2 ring-background"><AvatarFallback>A</AvatarFallback></Avatar>
            <Avatar class="ring-2 ring-background"><AvatarFallback>B</AvatarFallback></Avatar>
            <Avatar class="ring-2 ring-background"><AvatarFallback>C</AvatarFallback></Avatar>
          </div>
        </section>
      </div>
    `,
  }),
}
