brackt/app/components/league/SportIcon.stories.tsx

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

const meta: Meta<typeof SportIcon> = {
  title: "League/SportIcon",
  component: SportIcon,
  parameters: { layout: "centered" },
};

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

// Icons are uploaded at runtime via the admin panel and are not committed to the
// repo, so we use a data-URI placeholder here instead of a real file path.
const PLACEHOLDER_SVG =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234f46e5'/%3E%3C/svg%3E";

export const WithIcon: Story = {
  args: {
    sport: { name: "NBA", iconUrl: PLACEHOLDER_SVG },
  },
};

export const Fallback: Story = {
  args: {
    sport: { name: "Unknown Sport", iconUrl: null },
  },
};

export const SmallWithIcon: Story = {
  args: {
    sport: { name: "NFL", iconUrl: PLACEHOLDER_SVG },
    size: "sm",
  },
};

export const SmallFallback: Story = {
  args: {
    sport: { name: "Unknown Sport", iconUrl: null },
    size: "sm",
  },
};