import { Check } from 'lucide-react'
import { cn } from '@/lib/utils'

export function Checkbox({
  checked,
  onCheckedChange,
  disabled,
  className,
  id,
}: {
  checked: boolean
  onCheckedChange: (v: boolean) => void
  disabled?: boolean
  className?: string
  id?: string
}) {
  return (
    <button
      id={id}
      type="button"
      role="checkbox"
      aria-checked={checked}
      disabled={disabled}
      className={cn(
        'inline-flex h-4 w-4 items-center justify-center rounded border transition',
        checked
          ? 'border-transparent bg-[var(--bg-accent)] text-[var(--text-on-accent)]'
          : 'border-[var(--border-hover)] bg-[var(--bg-secondary)]',
        disabled && 'opacity-55 cursor-not-allowed',
        className,
      )}
      onClick={() => !disabled && onCheckedChange(!checked)}
    >
      {checked ? <Check size={12} strokeWidth={2.5} /> : null}
    </button>
  )
}
