import type { Meta, StoryObj } from "@storybook/react-vite";
import { TeamOwnerBadge } from "./team-owner-badge";

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

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

export const LeftAligned: Story = {
  args: {
    teamName: "Thunder Hawks",
    ownerName: "Chris M.",
  },
};

export const RightAligned: Story = {
  args: {
    teamName: "Shadow Hawks",
    ownerName: "Sarah J.",
    align: "right",
  },
};

export const WithoutOwner: Story = {
  args: {
    teamName: "Iron Eagles",
  },
};

export const LongNames: Story = {
  name: "Long Names (truncation)",
  args: {
    teamName: "The Incredibly Long Named Fantasy Team",
    ownerName: "Alexander Hamilton-Washington",
  },
};

export const AllVariants: Story = {
  name: "All Variants — Side by Side",
  render: () => (
    <div className="flex flex-col gap-4 max-w-xs">
      <TeamOwnerBadge teamName="Thunder Hawks" ownerName="Chris M." />
      <TeamOwnerBadge teamName="Shadow Hawks" ownerName="Sarah J." align="right" />
      <TeamOwnerBadge teamName="Iron Eagles" />
      <TeamOwnerBadge teamName="The Incredibly Long Named Fantasy Team" ownerName="Alexander Hamilton-Washington" />
    </div>
  ),
};