import React from 'react';
import { Check } from 'lucide-react';

export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
  onCheckedChange?: (checked: boolean) => void;
}

export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  ({ className = '', onCheckedChange, ...props }, ref) => {
    return (
      <div className={`relative flex items-center justify-center w-4 h-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}>
        <input
          type="checkbox"
          ref={ref}
          className="peer absolute inset-0 opacity-0 cursor-pointer w-full h-full m-0 disabled:cursor-not-allowed"
          onChange={(e) => onCheckedChange && onCheckedChange(e.target.checked)}
          {...props}
        />
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-current opacity-0 peer-checked:opacity-100 peer-checked:bg-primary peer-checked:text-primary-foreground transition-all duration-200 rounded-sm">
          <Check className="h-3 w-3" />
        </div>
      </div>
    );
  }
);
Checkbox.displayName = 'Checkbox';