import { Label, RadioGroup, RadioGroupItem } from "@ai-ui/ui";
import type { Meta, StoryObj } from "@storybook/react";

function RadioGroupExamples() {
  return (
    <div className="grid w-[720px] gap-6">
      <RadioGroup defaultValue="startup">
        <div className="flex items-center gap-3">
          <RadioGroupItem id="mode-startup" value="startup" />
          <Label htmlFor="mode-startup">Startup review</Label>
        </div>
        <div className="flex items-center gap-3">
          <RadioGroupItem id="mode-scale" value="scale" />
          <Label htmlFor="mode-scale">Scale review</Label>
        </div>
        <div className="flex items-center gap-3">
          <RadioGroupItem id="mode-enterprise" value="enterprise" />
          <Label htmlFor="mode-enterprise">Enterprise review</Label>
        </div>
      </RadioGroup>

      <RadioGroup defaultValue="email" orientation="horizontal">
        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
          <RadioGroupItem id="channel-email" value="email" />
          <Label htmlFor="channel-email">Email</Label>
        </div>
        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
          <RadioGroupItem id="channel-slack" value="slack" />
          <Label htmlFor="channel-slack">Slack</Label>
        </div>
        <div className="flex items-center gap-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-4">
          <RadioGroupItem id="channel-push" value="push" />
          <Label htmlFor="channel-push">Push</Label>
        </div>
      </RadioGroup>
    </div>
  );
}

const meta = {
  title: "Components/RadioGroup",
  component: RadioGroupExamples,
  parameters: {
    layout: "centered"
  },
  tags: ["autodocs"]
} satisfies Meta<typeof RadioGroupExamples>;

export default meta;

type Story = StoryObj<typeof meta>;

export const States: Story = {};