import type { Meta, StoryObj } from "@storybook/react-vite";
import { UserAvatar } from "./UserAvatar";

const meta: Meta<typeof UserAvatar> = {
  title: "UI/UserAvatar",
  component: UserAvatar,
  parameters: { layout: "padded" },
};

export default meta;
type Story = StoryObj<typeof UserAvatar>;

export const Flag: Story = {
  args: {
    userId: "user-1",
    name: "Chris Example",
    email: "chris@example.com",
    avatarType: "flag",
  },
};

export const Uploaded: Story = {
  args: {
    userId: "user-2",
    name: "Sam Example",
    email: "sam@example.com",
    avatarType: "uploaded",
    customAvatarUrl: "https://placehold.co/96x96/111827/adf661?text=SE",
  },
};

export const AllSizes: Story = {
  render: () => (
    <div className="flex items-end gap-4">
      {(["xs", "sm", "md", "lg", "xl"] as const).map((size) => (
        <div key={size} className="flex flex-col items-center gap-1">
          <UserAvatar userId={`user-${size}`} name="Flag User" email="flag@example.com" avatarType="flag" size={size} />
          <span className="text-xs text-muted-foreground">{size}</span>
        </div>
      ))}
    </div>
  ),
};