import {Label} from '../components/ui/label'
import {RadioGroup, RadioGroupItem} from '../components/ui/radio-group'

import type {Meta, StoryObj} from '@storybook/react-vite'

const meta = {
  title: 'UI/RadioGroup',
  component: RadioGroup,
  parameters: {},
  args: {
    defaultValue: 'option-1',
    disabled: false,
  },
  tags: ['autodocs'],
} satisfies Meta<typeof RadioGroup>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => (
    <RadioGroup defaultValue="option-1">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-1" id="option-1" />
        <Label>Option 1</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-2" id="option-2" />
        <Label>Option 2</Label>
      </div>
    </RadioGroup>
  ),
}

export const Disabled: Story = {
  args: {
    disabled: true,
  },
  render: ({disabled}) => (
    <RadioGroup defaultValue="option-1" disabled={disabled}>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-1" id="disabled-option-1" />
        <Label>Option 1</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-2" id="disabled-option-2" />
        <Label>Option 2</Label>
      </div>
    </RadioGroup>
  ),
}
