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 WithFlag: Story = {
  args: {
    teamId: "team-4",
    teamName: "Flag Club",
    avatarType: "flag",
    flagConfig: { pattern: "nordic-cross", colors: ["#adf661", "#111827", "#ffffff"] },
  },
};

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

export const InheritingOwnerImage: Story = {
  name: "Inheriting Owner Image (avatarType: owner)",
  args: {
    teamId: "team-5",
    teamName: "Inherited Squad",
    avatarType: "owner",
    ownerAvatarData: { type: "image", url: "https://placehold.co/48x48/1a1a2e/adf661?text=OW" },
  },
};

export const InheritingOwnerFlag: Story = {
  name: "Inheriting Owner Flag (avatarType: owner)",
  args: {
    teamId: "team-6",
    teamName: "Flag Inheritors",
    avatarType: "owner",
    ownerAvatarData: {
      type: "flag",
      config: { pattern: "diagonal", colors: ["#adf661", "#111827", "#ffffff"] },
    },
  },
};

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 className="flex flex-col items-center gap-1">
        <TeamAvatar teamId="team-1" teamName="Thunder Hawks" size="xl" />
        <span className="text-xs text-muted-foreground">xl</span>
      </div>
    </div>
  ),
};