import type { Meta, StoryObj } from "@storybook/preact";
import { ImageDisplay } from "./ImageDisplay";

const meta: Meta<typeof ImageDisplay> = {
  title: "Primitives/ImageDisplay", component: ImageDisplay,
  argTypes: { shape: { control: "radio", options: ["square", "circle", "full"] }, size: { control: "radio", options: ["sm", "md", "lg", "full"] } },
};
export default meta;
type Story = StoryObj<typeof ImageDisplay>;

const img = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect fill='%23334155' width='400' height='300'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%2394a3b8' font-family='monospace' font-size='16'%3E400×300%3C/text%3E%3C/svg%3E";
export const Square: Story = { args: { src: img, shape: "square", size: "md" } };
export const Circle: Story = { args: { src: img, shape: "circle", size: "md" } };
export const FullWidth: Story = { args: { src: img, shape: "full", size: "full" } };
export const Small: Story = { args: { src: img, shape: "square", size: "sm" } };
export const AllVariants: Story = {
  render: () => (
    <div class="flex flex-wrap gap-4 items-end">
      <ImageDisplay src={img} shape="square" size="sm" />
      <ImageDisplay src={img} shape="square" size="md" />
      <ImageDisplay src={img} shape="circle" size="md" />
      <ImageDisplay src={img} shape="square" size="lg" />
    </div>
  ),
};
