/* eslint-disable react/no-array-index-key */

import type { Meta, StoryObj } from "@storybook/react";

import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { RadioGroup, RadioGroupItem } from "./radio-group";

const meta = {
  title: "UI/Radio",
  component: RadioGroup,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
} satisfies Meta<typeof RadioGroup>;

export default meta;

type Story = StoryObj<typeof RadioGroup>;

const data = ["one", "two", "there"];

export const DefaultRadioGrup: Story = {
  render: () => {
    return (
      <RadioGroup defaultValue="one" className="flex-col gap-2">
        {data.map((item, index) => (
          <RadioGroupItem key={index} value={item} label={item} />
        ))}
      </RadioGroup>
    );
  },
};

export const PrimaryRadioGrup: Story = {
  render: () => {
    return (
      <RadioGroup defaultValue="one" className="flex-col gap-2">
        {data.map((item, index) => (
          <RadioGroupItem
            variant="primary"
            key={index}
            value={item}
            label={item}
          />
        ))}
      </RadioGroup>
    );
  },
};

export const SuccessRadioGrup: Story = {
  render: () => {
    return (
      <RadioGroup defaultValue="one" className="flex-col gap-2">
        {data.map((item, index) => (
          <RadioGroupItem
            variant="success"
            key={index}
            value={item}
            label={item}
          />
        ))}
      </RadioGroup>
    );
  },
};

export const DangerRadioGrup: Story = {
  render: () => {
    return (
      <RadioGroup defaultValue="one" className="flex-col gap-2">
        {data.map((item, index) => (
          <RadioGroupItem
            variant="danger"
            key={index}
            value={item}
            label={item}
          />
        ))}
      </RadioGroup>
    );
  },
};

export const SmRadioGrup: Story = {
  render: () => {
    return (
      <RadioGroup defaultValue="one" className="flex-col gap-2">
        {data.map((item, index) => (
          <RadioGroupItem
            size="sm"
            variant="primary"
            key={index}
            value={item}
            label={item}
          />
        ))}
      </RadioGroup>
    );
  },
};

export const MdRadioGrup: Story = {
  render: () => {
    return (
      <RadioGroup defaultValue="one" className="flex-col gap-2">
        {data.map((item, index) => (
          <RadioGroupItem
            size="md"
            variant="primary"
            key={index}
            value={item}
            label={item}
          />
        ))}
      </RadioGroup>
    );
  },
};

export const LgRadioGrup: Story = {
  render: () => {
    return (
      <RadioGroup defaultValue="one" className="flex-col gap-2">
        {data.map((item, index) => (
          <RadioGroupItem
            size="lg"
            variant="primary"
            key={index}
            value={item}
            label={item}
          />
        ))}
      </RadioGroup>
    );
  },
};

export const XlRadioGrup: Story = {
  render: () => {
    return (
      <RadioGroup defaultValue="one" className="flex-col gap-2">
        {data.map((item, index) => (
          <RadioGroupItem
            size="xl"
            variant="primary"
            key={index}
            value={item}
            label={item}
          />
        ))}
      </RadioGroup>
    );
  },
};