'use client'
import { Label } from '@imwebme/zynk-react-components'
import * as RadioGroupPrimitive from './radio-group'
import tw from 'twin.macro'

export function RadioGroupDemo() {
  return (
    <RadioGroupPrimitive.Root defaultValue="comfortable">
      <div tw="!flex items-center space-x-2">
        <RadioGroupPrimitive.Item value="default" id="r1" disabled checked />
        <Label htmlFor="r1">Disabled checked</Label>
      </div>
      <div tw="!flex items-center space-x-2">
        <RadioGroupPrimitive.Item value="default" id="r1" disabled />
        <Label htmlFor="r1">Disabled unchecked</Label>
      </div>
      <div tw="!flex items-center space-x-2">
        <RadioGroupPrimitive.Item value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
      <div tw="!flex items-center space-x-2">
        <RadioGroupPrimitive.Item value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroupPrimitive.Root>
  )
}
