import type { Meta, StoryObj } from "@storybook/react-vite";
import { FLAG_PATTERNS } from "~/lib/flag-types";
import { FlagSvg } from "./FlagSvg";

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

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

export const AllPatterns: Story = {
  render: () => (
    <div className="grid grid-cols-4 gap-4">
      {FLAG_PATTERNS.map((pattern) => (
        <div key={pattern} className="space-y-2">
          <FlagSvg
            config={{ pattern, colors: ["#adf661", "#111827", "#ffffff"] }}
            size={64}
            className="rounded-md border border-border"
          />
          <p className="text-xs text-muted-foreground">{pattern}</p>
        </div>
      ))}
    </div>
  ),
};