import React from 'react'
import { RadioGroup } from '../components/RadioGroup'
import type { Meta, StoryObj } from '@storybook/react'
import { SizeVariant } from '../types'

const meta = {
  title: 'Form/RadioGroup',
  component: RadioGroup,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof RadioGroup>

export default meta

type Story = StoryObj<typeof meta>

const defaultArgs = {
  disabled: false,
}

const sizeOptions = [
  { label: 'Small', value: 'S', size: 'small' },
  { label: 'Medium', value: 'M', size: 'medium' },
  { label: 'Large', value: 'L', size: 'large' },
]

const genderOptions = [
  { label: 'Male', value: 'M' },
  { label: 'Female', value: 'F' },
  { label: 'Other', value: 'O' },
]

export const Playground: Story = {
  args: {
    color: 'primary',
    options: genderOptions,
    name: 'gender',
    label: 'Gender',
    checked: 'F',
  },
}

export const RadioboxVertical = () => {
  return (
    <>
      <RadioGroup
        name="gender"
        options={genderOptions}
        label="Gender"
        color="primary"
        checked="M"
        id="gender"
      />
    </>
  )
}
RadioboxVertical.storyName = 'RadioGroup Vertical'

export const RadioHorizontal = () => {
  return (
    <>
      <RadioGroup
        name="gender"
        options={genderOptions}
        label="Gender"
        color="primary"
        checked="M"
        id="gender"
        direction="horizontal"
      />
    </>
  )
}
RadioHorizontal.storyName = 'RadioGroup Horizontal'

export const RadioSizes = () => {
  return (
    <>
      <RadioGroup
        name="size"
        options={sizeOptions}
        label="Sizes"
        color="primary"
        checked="M"
        id="size"
        direction="horizontal"
      />
    </>
  )
}
RadioSizes.storyName = 'RadioGroup Sizes'