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

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

export const Initials: Story = { args: { name: "Alice Chen" } };
export const WithImage: Story = { args: { name: "Bob", image: "https://i.pravatar.cc/64?u=bob" } };
export const Small: Story = { args: { name: "Carol", size: "sm" } };
export const Large: Story = { args: { name: "Dan", size: "lg" } };
export const MultipleAvatars: Story = {
  render: () => (
    <div class="flex gap-2">
      {["Alice", "Bob", "Carol", "Dan", "Eve", "Frank"].map((n) => (
        <Avatar key={n} name={n} />
      ))}
    </div>
  ),
};
