'use client'

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import { cn } from '@/lib/utils'

interface CheckboxOptionProps {
  id: string
  label: string
  checked: boolean
  onCheckedChange: (checked: boolean) => void
  disabled?: boolean
  className?: string
}

export function CheckboxOption({
  id,
  label,
  checked,
  onCheckedChange,
  disabled = false,
  className,
}: CheckboxOptionProps) {
  return (
    <div
      className={cn(
        'flex items-center space-x-3 rounded-lg border p-3 cursor-pointer transition-colors select-none',
        checked ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50',
        disabled && 'opacity-50 cursor-not-allowed',
        className,
      )}
      onClick={() => !disabled && onCheckedChange(!checked)}
      role="button"
      tabIndex={disabled ? -1 : 0}
      onKeyDown={(e) => {
        if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
          e.preventDefault()
          onCheckedChange(!checked)
        }
      }}
    >
      <Checkbox
        id={id}
        checked={checked}
        onCheckedChange={onCheckedChange}
        onClick={(e) => e.stopPropagation()}
        disabled={disabled}
      />
      <Label
        htmlFor={id}
        className={cn('cursor-pointer flex-1 text-sm', disabled && 'cursor-not-allowed')}
        onClick={(e) => e.stopPropagation()}
      >
        {label}
      </Label>
    </div>
  )
}