import React from 'react';
import { CheckIcon } from '@heroicons/react/24/outline';

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

export const Checkbox: React.FC<CheckboxProps> = ({
  id,
  checked,
  onCheckedChange,
  disabled = false,
  className = '',
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onCheckedChange(event.target.checked);
  };

  return (
    <div className={`relative inline-flex items-center ${className}`}>
      <input
        id={id}
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        disabled={disabled}
        className="sr-only"
      />
      <div
        className={`
          w-4 h-4 border-2 rounded flex items-center justify-center cursor-pointer transition-all duration-200
          ${checked 
            ? 'bg-blue-500 border-blue-500' 
            : 'bg-white border-gray-300 hover:border-gray-400'
          }
          ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
        `}
        onClick={() => !disabled && onCheckedChange(!checked)}
      >
        {checked && (
          <CheckIcon className="w-3 h-3 text-white" strokeWidth={3} />
        )}
      </div>
    </div>
  );
};
