import { Label } from 'index'
import * as RadioGroupPrimitive from './index'

export default () => (
  <RadioGroupPrimitive.Root defaultValue="comfortable">
    <div tw="flex items-center space-x-2">
      <RadioGroupPrimitive.Item value="default" id="r1" tw="dark:text-red-500 dark:hover:text-red-300" />
      <Label htmlFor="r1" tw="dark:text-slate-50">Default</Label>
    </div>
    <div tw="flex items-center space-x-2">
      <RadioGroupPrimitive.Item value="comfortable" id="r2" />
      <Label htmlFor="r2" tw="dark:text-slate-50">Comfortable</Label>
    </div>
    <div tw="flex items-center space-x-2">
      <RadioGroupPrimitive.Item value="compact" id="r3" />
      <Label htmlFor="r3" tw="dark:text-slate-50">Compact</Label>
    </div>
  </RadioGroupPrimitive.Root>
)
