import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { fn } from "storybook/test";
import { TrialOptionsGrid } from "./TrialOptionsGrid";
import type { TrialOptionsItem } from "./TrialOptionsGrid";

const buildItems = (n: number): TrialOptionsItem[] =>
  Array.from({ length: n }).map((_, i) => ({
    id: `opt-${i + 1}`,
    value: `$${i + 1}`,
    title: i % 2 === 0 ? "Basic" : "Pro",
    state: i === 1 ? "selected" : i === 2 ? "accent" : "default",
    error: false,
    onClick: fn(),
  }));

const meta: Meta<typeof TrialOptionsGrid> = {
  title: "Widgets/TrialOptionsGrid",
  component: TrialOptionsGrid,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  args: {
    items: buildItems(2),
    onItemClick: fn(),
    className: "w-[360px]",
  },
};

export default meta;

export type Story = StoryObj<typeof meta>;

export const One: Story = {
  args: {
    items: buildItems(1),
  },
};

export const Two: Story = {
  args: {
    items: buildItems(2),
  },
};

export const Three: Story = {
  args: {
    items: buildItems(3),
  },
};

export const Four: Story = {
  args: {
    items: buildItems(4),
  },
};

export const Five: Story = {
  args: {
    items: buildItems(5),
  },
};

export const WithErrors: Story = {
  args: {
    items: [
      { id: "a", value: "$1", title: "Basic", state: "default", error: true },
      { id: "b", value: "$2", title: "Pro", state: "selected", error: false },
      { id: "c", value: "$3", title: "Plus", state: "accent", error: true },
      { id: "d", value: "$4", title: "Max", state: "default", error: false },
    ],
  },
};
