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

const meta = {
  title: "Elements/Display/ImageDisplay",
  component: ImageDisplay,
  tags: ["autodocs"],
  args: {
    src: "https://picsum.photos/seed/gxp/600/400",
    alt: "Random landscape",
  },
  parameters: componentDoc("ImageDisplay", { barrel: "display" }),
  decorators: [
    () => ({
      template: '<div class="max-w-md p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof ImageDisplay>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    src: "https://picsum.photos/seed/gxp/600/400",
    alt: "Random landscape",
  },
}

export const WithCustomContent: Story = {
  args: {
    src: "https://picsum.photos/seed/portrait/400/600",
    alt: "Portrait orientation",
  },
}

export const EmptyPlaceholder: Story = {
  args: { src: undefined },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { ImageDisplay },
    template: `
      <div class="grid grid-cols-2 gap-4">
        <ImageDisplay src="https://picsum.photos/seed/a/300/200" alt="a" />
        <ImageDisplay src="https://picsum.photos/seed/b/300/200" alt="b" />
      </div>
    `,
  }),
}
