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

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

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

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

const participants = [
  { id: "p1", name: "Max Verstappen", sport: { name: "F1" } },
  { id: "p2", name: "LeBron James", sport: { name: "Basketball" } },
  { id: "p3", name: "Scottie Scheffler", sport: { name: "Golf" } },
  { id: "p4", name: "Alexander Ovechkin-Washington", sport: { name: "Ice Hockey" } },
];

const queue = [
  { id: "q1", participantId: "p1" },
  { id: "q2", participantId: "p2" },
  { id: "q3", participantId: "p3" },
];

export const Empty: Story = {
  args: {
    queue: [],
    availableParticipants: participants,
    canPick: false,
    onRemoveFromQueue: () => {},
    onReorder: () => {},
    onMakePick: () => {},
  },
};

export const NotYourTurn: Story = {
  name: "With Items — Not Your Turn",
  args: {
    queue,
    availableParticipants: participants,
    canPick: false,
    onRemoveFromQueue: () => {},
    onReorder: () => {},
    onMakePick: () => {},
  },
};

export const YourTurn: Story = {
  name: "With Items — Your Turn (Draft button visible)",
  args: {
    queue,
    availableParticipants: participants,
    canPick: true,
    onRemoveFromQueue: () => {},
    onReorder: () => {},
    onMakePick: () => {},
  },
};

export const LongNameYourTurn: Story = {
  name: "Long Name — Your Turn (two-line layout)",
  args: {
    queue: [{ id: "q1", participantId: "p4" }],
    availableParticipants: participants,
    canPick: true,
    onRemoveFromQueue: () => {},
    onReorder: () => {},
    onMakePick: () => {},
  },
};

export const LongNameNotYourTurn: Story = {
  name: "Long Name — Not Your Turn (truncation only)",
  args: {
    queue: [{ id: "q1", participantId: "p4" }],
    availableParticipants: participants,
    canPick: false,
    onRemoveFromQueue: () => {},
    onReorder: () => {},
    onMakePick: () => {},
  },
};

export const SingleItem: Story = {
  name: "Single Item — Your Turn",
  args: {
    queue: [{ id: "q1", participantId: "p1" }],
    availableParticipants: participants,
    canPick: true,
    onRemoveFromQueue: () => {},
    onReorder: () => {},
    onMakePick: () => {},
  },
};

const manyParticipants = [
  { id: "p1", name: "Max Verstappen", sport: { name: "F1" } },
  { id: "p2", name: "LeBron James", sport: { name: "Basketball" } },
  { id: "p3", name: "Scottie Scheffler", sport: { name: "Golf" } },
  { id: "p4", name: "Alexander Ovechkin-Washington", sport: { name: "Ice Hockey" } },
  { id: "p5", name: "Patrick Mahomes", sport: { name: "NFL" } },
  { id: "p6", name: "Connor McDavid", sport: { name: "Ice Hockey" } },
  { id: "p7", name: "Novak Djokovic", sport: { name: "Tennis" } },
  { id: "p8", name: "Erling Haaland", sport: { name: "Soccer" } },
];

const longQueue = manyParticipants.map((p, i) => ({ id: `q${i + 1}`, participantId: p.id }));

export const FullQueue: Story = {
  name: "Full Queue — Your Turn (scroll check)",
  args: {
    queue: longQueue,
    availableParticipants: manyParticipants,
    canPick: true,
    onRemoveFromQueue: () => {},
    onReorder: () => {},
    onMakePick: () => {},
  },
};