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

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

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

export const Default: Story = {
  args: {
    teamId: "team-1",
    teamName: "Thunder Hawks",
  },
};

export const Small: Story = {
  args: {
    teamId: "team-1",
    teamName: "Thunder Hawks",
    size: "sm",
  },
};

export const Large: Story = {
  args: {
    teamId: "team-1",
    teamName: "Thunder Hawks",
    size: "lg",
  },
};

export const WithLogo: Story = {
  args: {
    teamId: "team-2",
    teamName: "Iron Eagles",
    logoUrl: "https://placehold.co/48x48/1a1a2e/e0e0e0?text=IE",
  },
};

export const SingleWordName: Story = {
  args: {
    teamId: "team-3",
    teamName: "Superteam",
  },
};

export const AllSizes: Story = {
  name: "All Sizes — Side by Side",
  render: () => (
    <div className="flex items-end gap-4">
      <div className="flex flex-col items-center gap-1">
        <TeamAvatar teamId="team-1" teamName="Thunder Hawks" size="sm" />
        <span className="text-xs text-muted-foreground">sm</span>
      </div>
      <div className="flex flex-col items-center gap-1">
        <TeamAvatar teamId="team-1" teamName="Thunder Hawks" size="md" />
        <span className="text-xs text-muted-foreground">md</span>
      </div>
      <div className="flex flex-col items-center gap-1">
        <TeamAvatar teamId="team-1" teamName="Thunder Hawks" size="lg" />
        <span className="text-xs text-muted-foreground">lg</span>
      </div>
    </div>
  ),
};