brackt/app/components/standings/RecentScoresCard.stories.tsx

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

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

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

const now = new Date();

const baseEvent: ScoreEventEntry = {
  id: "event-1",
  teamId: "team-1",
  teamName: "Thunderhawks",
  ownerName: "Chris M.",
  scoringEventId: "se-1",
  scoringEventName: "NBA Playoffs Game 3",
  sportName: "NBA",
  pointsDelta: "25.5",
  occurredAt: now.toISOString(),
  participants: [
    { id: "p1", name: "LeBron James" },
    { id: "p2", name: "Jayson Tatum" },
  ],
};

export const Empty: Story = {
  args: {
    events: [],
  },
};

export const SingleEvent: Story = {
  args: {
    events: [baseEvent],
  },
};

export const MultipleEvents: Story = {
  args: {
    events: [
      baseEvent,
      {
        ...baseEvent,
        id: "event-2",
        teamName: "Storm Chasers",
        ownerName: "Sarah J.",
        scoringEventName: "F1 Monaco Grand Prix",
        sportName: "F1",
        pointsDelta: "45",
        occurredAt: new Date(now.getTime() - 3 * 60 * 60 * 1000).toISOString(),
        participants: [
          { id: "p3", name: "Max Verstappen" },
          { id: "p4", name: "Charles Leclerc" },
        ],
      },
      {
        ...baseEvent,
        id: "event-3",
        teamName: "Golden Eagles",
        ownerName: "Mike T.",
        scoringEventName: "Champions League Quarter-Final",
        sportName: "UCL",
        pointsDelta: "30.0",
        occurredAt: new Date(now.getTime() - 12 * 60 * 60 * 1000).toISOString(),
        participants: [
          { id: "p5", name: "Erling Haaland" },
          { id: "p6", name: "Vinicius Jr" },
        ],
      },
    ],
  },
};

export const RecentAndOld: Story = {
  args: {
    events: [
      {
        ...baseEvent,
        id: "event-recent-1",
        pointsDelta: "20",
        occurredAt: new Date(now.getTime() - 30 * 60 * 1000).toISOString(),
      },
      {
        ...baseEvent,
        id: "event-recent-2",
        teamName: "Lightning Bolts",
        ownerName: "Alex K.",
        scoringEventName: "NBA Playoffs Game 4",
        sportName: "NBA",
        pointsDelta: "15.5",
        occurredAt: new Date(now.getTime() - 6 * 60 * 60 * 1000).toISOString(),
        participants: [{ id: "p7", name: "Stephen Curry" }],
      },
      {
        ...baseEvent,
        id: "event-old-1",
        teamName: "Cobras",
        ownerName: "Jennifer L.",
        scoringEventName: "Premier League Matchday 35",
        sportName: "Premier League",
        pointsDelta: "35",
        occurredAt: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000).toISOString(),
        participants: [
          { id: "p8", name: "Mohamed Salah" },
          { id: "p9", name: "Kevin De Bruyne" },
        ],
      },
      {
        ...baseEvent,
        id: "event-old-2",
        teamName: "Wolves",
        ownerName: null,
        scoringEventName: "Snooker World Championship",
        sportName: "Snooker",
        pointsDelta: "12",
        occurredAt: new Date(now.getTime() - 3 * 24 * 60 * 60 * 1000).toISOString(),
        participants: [{ id: "p10", name: "Ronnie O'Sullivan" }],
      },
    ],
  },
};

export const IntegerPoints: Story = {
  args: {
    events: [
      { ...baseEvent, pointsDelta: "10", occurredAt: new Date(now.getTime() - 1 * 60 * 60 * 1000).toISOString() },
      { ...baseEvent, id: "event-2", pointsDelta: "25", occurredAt: new Date(now.getTime() - 5 * 60 * 60 * 1000).toISOString() },
      { ...baseEvent, id: "event-3", pointsDelta: "40", occurredAt: new Date(now.getTime() - 10 * 60 * 60 * 1000).toISOString() },
    ],
  },
};

export const DecimalPoints: Story = {
  args: {
    events: [
      { ...baseEvent, pointsDelta: "12.5", occurredAt: new Date(now.getTime() - 1 * 60 * 60 * 1000).toISOString() },
      { ...baseEvent, id: "event-2", pointsDelta: "8.3", occurredAt: new Date(now.getTime() - 5 * 60 * 60 * 1000).toISOString() },
      { ...baseEvent, id: "event-3", pointsDelta: "33.7", occurredAt: new Date(now.getTime() - 10 * 60 * 60 * 1000).toISOString() },
    ],
  },
};

export const NoOwnerName: Story = {
  args: {
    events: [
      { ...baseEvent, ownerName: null, occurredAt: new Date(now.getTime() - 1 * 60 * 60 * 1000).toISOString() },
      { ...baseEvent, id: "event-2", teamName: "Iron Wolves", ownerName: null, occurredAt: new Date(now.getTime() - 5 * 60 * 60 * 1000).toISOString() },
    ],
  },
};

export const SingleParticipant: Story = {
  args: {
    events: [
      { ...baseEvent, participants: [{ id: "p1", name: "LeBron James" }] },
      { ...baseEvent, id: "event-2", participants: [{ id: "p2", name: "Max Verstappen" }] },
    ],
  },
};

export const MultipleParticipants: Story = {
  args: {
    events: [
      {
        ...baseEvent,
        participants: [
          { id: "p1", name: "LeBron James" },
          { id: "p2", name: "Jayson Tatum" },
          { id: "p3", name: "Stephen Curry" },
        ],
      },
      {
        ...baseEvent,
        id: "event-2",
        participants: [
          { id: "p4", name: "Max Verstappen" },
          { id: "p5", name: "Charles Leclerc" },
          { id: "p6", name: "Fernando Alonso" },
          { id: "p7", name: "Lewis Hamilton" },
        ],
      },
    ],
  },
};