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

interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
    label?: string; // Optional label text
    checked: boolean;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export const Checkbox: React.FC<CheckboxProps> = ({ label, checked, onChange, className = '', ...props }) => {
    return (
        <label className={`flex items-center gap-2 cursor-pointer group ${className}`}>
            <div className="relative flex items-center justify-center w-[48px] h-[48px] shrink-0">
                {/* Real hidden input */}
                <input
                    type="checkbox"
                    className="appearance-none peer absolute inset-0 w-full h-full cursor-pointer z-10 opacity-0"
                    checked={checked}
                    onChange={onChange}
                    {...props}
                />

                {/* Visual Box */}
                <div className="
                    w-[18px] h-[18px] 
                    rounded-[2px] 
                    border-2 border-on-surface-variant 
                    peer-checked:bg-primary peer-checked:border-primary 
                    peer-checked:text-on-primary
                    group-hover:bg-on-surface-variant/10
                    transition-all duration-200
                    flex items-center justify-center
                ">
                    <Check size={14} className={`opacity-0 peer-checked:opacity-100 transition-opacity duration-200 text-on-primary ${checked ? 'opacity-100' : ''}`} strokeWidth={3} />
                </div>

                {/* State Layer (Hover/Focus Halo) - handled by hover on parent usually, but M3 has a dedicated circle */}
                <div className="absolute inset-0 rounded-full scale-0 group-hover:scale-100 bg-on-surface/10 transition-transform duration-200 -z-0 pointer-events-none" />
            </div>

            {label && <span className="text-body-md text-on-surface select-none">{label}</span>}
        </label>
    );
};
