brackt/app/components/draft/DraftPickCell.stories.tsx

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

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

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

const basePickArgs = {
  pickNumber: 1,
  round: 1,
  pickInRound: 1,
  state: "picked" as const,
  pick: {
    participant: { name: "LeBron James" },
    sport: { name: "Basketball" },
  },
};

export const Upcoming: Story = {
  args: {
    pickNumber: 5,
    round: 1,
    pickInRound: 5,
    state: "upcoming",
  },
};

export const Current: Story = {
  args: {
    pickNumber: 5,
    round: 1,
    pickInRound: 5,
    state: "current",
  },
};

export const Picked: Story = {
  args: basePickArgs,
};

export const PickedElectricCorona: Story = {
  args: {
    ...basePickArgs,
    corona: "electric",
  },
};

export const PickedEmeraldCorona: Story = {
  args: {
    ...basePickArgs,
    corona: "emerald",
  },
};

export const PickedAmberCorona: Story = {
  args: {
    ...basePickArgs,
    corona: "amber",
  },
};

export const PickedCoralCorona: Story = {
  args: {
    ...basePickArgs,
    corona: "coral",
  },
};

export const PickedLongNames: Story = {
  name: "Picked — Long Names (truncation)",
  args: {
    pickNumber: 12,
    round: 2,
    pickInRound: 6,
    state: "picked",
    pick: {
      participant: { name: "Alexander Ovechkin-Washington" },
      sport: { name: "Ice Hockey — NHL 2025/26" },
    },
  },
};

export const AllStatesSideBySide: Story = {
  name: "All States — Side by Side",
  render: () => (
    <div className="flex gap-2 items-stretch">
      <DraftPickCell
        pickNumber={1}
        round={1}
        pickInRound={1}
        state="picked"
        pick={basePickArgs.pick}
      />
      <DraftPickCell
        pickNumber={2}
        round={1}
        pickInRound={2}
        state="current"
      />
      <DraftPickCell
        pickNumber={3}
        round={1}
        pickInRound={3}
        state="upcoming"
      />
    </div>
  ),
};

export const CoronaVariantsRow: Story = {
  name: "Corona Variants — Side by Side",
  render: () => (
    <div className="flex gap-2 items-stretch">
      {(
        ["gradient", "electric", "emerald", "amber", "coral"] as const
      ).map((variant, i) => (
        <DraftPickCell
          key={variant}
          pickNumber={i + 1}
          round={1}
          pickInRound={i + 1}
          state="picked"
          pick={basePickArgs.pick}
          corona={variant}
        />
      ))}
    </div>
  ),
};

export const CoronaStateEliminated: Story = {
  name: "Corona State — Eliminated (0 pts)",
  args: {
    ...basePickArgs,
    coronaState: { type: "eliminated", points: 0 },
  },
};

export const CoronaStatePending: Story = {
  name: "Corona State — Pending (no result)",
  args: {
    ...basePickArgs,
    coronaState: { type: "pending" },
  },
};

export const CoronaStateScored100: Story = {
  name: "Corona State — Scored 100%",
  args: {
    ...basePickArgs,
    coronaState: { type: "scored", brightness: 1, points: 100 },
  },
};

export const CoronaStateScored70: Story = {
  name: "Corona State — Scored 70%",
  args: {
    ...basePickArgs,
    coronaState: { type: "scored", brightness: 0.7, points: 70 },
  },
};

export const CoronaStateScored45: Story = {
  name: "Corona State — Scored 45%",
  args: {
    ...basePickArgs,
    coronaState: { type: "scored", brightness: 0.45, points: 45 },
  },
};

export const CoronaStateScored25: Story = {
  name: "Corona State — Scored 25%",
  args: {
    ...basePickArgs,
    coronaState: { type: "scored", brightness: 0.25, points: 25 },
  },
};

export const CoronaStatesRow: Story = {
  name: "Corona States — All Side by Side",
  render: () => (
    <div className="flex gap-2 items-stretch">
      <DraftPickCell
        pickNumber={1}
        round={1}
        pickInRound={1}
        state="picked"
        pick={basePickArgs.pick}
        coronaState={{ type: "eliminated", points: 0 }}
      />
      <DraftPickCell
        pickNumber={2}
        round={1}
        pickInRound={2}
        state="picked"
        pick={basePickArgs.pick}
        coronaState={{ type: "pending" }}
      />
      <DraftPickCell
        pickNumber={3}
        round={1}
        pickInRound={3}
        state="picked"
        pick={basePickArgs.pick}
        coronaState={{ type: "scored", brightness: 1, points: 100 }}
      />
      <DraftPickCell
        pickNumber={4}
        round={1}
        pickInRound={4}
        state="picked"
        pick={basePickArgs.pick}
        coronaState={{ type: "scored", brightness: 0.7, points: 70 }}
      />
      <DraftPickCell
        pickNumber={5}
        round={1}
        pickInRound={5}
        state="picked"
        pick={basePickArgs.pick}
        coronaState={{ type: "scored", brightness: 0.45, points: 45 }}
      />
      <DraftPickCell
        pickNumber={6}
        round={1}
        pickInRound={6}
        state="picked"
        pick={basePickArgs.pick}
        coronaState={{ type: "scored", brightness: 0.25, points: 25 }}
      />
    </div>
  ),
};