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

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

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

export const Default: Story = {
  args: {
    leagueId: "league-1",
    leagueName: "Friday Night Ballers",
  },
};

export const Small: Story = {
  args: {
    leagueId: "league-1",
    leagueName: "Friday Night Ballers",
    className: "h-5 w-5",
    textClassName: "text-[10px]",
  },
};

export const Large: Story = {
  args: {
    leagueId: "league-1",
    leagueName: "Friday Night Ballers",
    className: "h-16 w-16",
    textClassName: "text-xl",
  },
};

export const SingleWordName: Story = {
  args: {
    leagueId: "league-2",
    leagueName: "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">
        <LeagueAvatar leagueId="league-1" leagueName="Friday Night Ballers" className="h-5 w-5" textClassName="text-[10px]" />
        <span className="text-xs text-muted-foreground">sm</span>
      </div>
      <div className="flex flex-col items-center gap-1">
        <LeagueAvatar leagueId="league-1" leagueName="Friday Night Ballers" />
        <span className="text-xs text-muted-foreground">default</span>
      </div>
      <div className="flex flex-col items-center gap-1">
        <LeagueAvatar leagueId="league-1" leagueName="Friday Night Ballers" className="h-16 w-16" textClassName="text-xl" />
        <span className="text-xs text-muted-foreground">lg</span>
      </div>
    </div>
  ),
};