'use client'

import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import { cn } from '@/lib/utils/cn'
import { ErrorIcon } from '../icons/form-icon'

interface RadioGroupProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {
  hasError?: boolean
  errorMessage?: string
}
export function RadioGroup({ className, hasError, errorMessage, ...props }: RadioGroupProps) {
  return (
    <div>
      <RadioGroupPrimitive.Root
        data-slot="radio-group"
        className={cn('flex flex-col gap-2 w-full', className)}
        {...props}
      />
      {hasError && errorMessage && (
        <div className="flex items-center justify-start mt-2">
          <ErrorIcon width={20} height={20} className="text-func-red-main flex-shrink-0" />
          <p className={cn('label-medium-regular ml-1 text-func-red-main')}>{errorMessage}</p>
        </div>
      )}
    </div>
  )
}

interface RadioItemProps extends React.ComponentProps<typeof RadioGroupPrimitive.Item> {
  label: string
  id: string
}
export function ListItemRadio({ id, label, className, ...props }: RadioItemProps) {
  return (
    <label
      htmlFor={id}
      className={cn(
        'group flex items-center w-full gap-3 rounded-lg border p-4 transition-colors cursor-pointer',
        'border-grey-600 hover:border-grey-400',
        'data-[state=checked]:border-beige-500',
        'aria-invalid:border-destructive',
        'focus-within:border-beige-500',
        className,
      )}
    >
      <RadioGroupPrimitive.Item
        id={id}
        data-slot="radio-group-item"
        className={cn(
          'relative flex h-5 w-5 items-center justify-center rounded-full border border-grey-600 transition-colors',
          'group-hover:border-grey-400',
          'data-[state=checked]:border-beige-500',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-beige-500',
        )}
        {...props}
      >
        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
          <div className="h-2.5 w-2.5 rounded-full bg-beige-500" />
        </RadioGroupPrimitive.Indicator>
      </RadioGroupPrimitive.Item>
      <span className="label-medium-regular text-grey-100 flex-1">{label}</span>
    </label>
  )
}
