'use client'
import {FormLabel} from '@/components/ui/form'
import {merge} from '@/lib/utils'
import {RadioGroupItem} from '@/components/ui/radio-group'
import {ReactNode} from 'react'

export type FormOptionProps = {
  id: string
  value: string
  label?: string
  description?: string
  compare: string
  className?: string
  children?: ReactNode
}

export default function FormOption(props: FormOptionProps) {
  return (
    <>
      <FormLabel
        htmlFor={props.id}
        className={merge(
          `transition-colors duration-150 ease-in-out`,
          `px-6 py-4 border rounded-md flex flex-col gap-2 cursor-pointer`,
          props.compare === props.value ? `bg-primary/10 border-primary` : `border-gray-200`,
          props.className,
        )}>
        {props.children ? props.children : (
          <>
            <span>{props.label}</span>
            {props.description && <p className="text-sm text-gray-500">{props.description}</p>}
          </>
        )}
      </FormLabel>
      <RadioGroupItem id={props.id} value={props.value} className="hidden"/>
    </>
  )
}