import { cn } from '@/lib/utils';

type CheckboxCardProps = {
    checked: boolean;
    onChange: () => void;
    label: string;
    className?: string;
};

export function CheckboxCard({
    checked,
    onChange,
    label,
    className,
}: CheckboxCardProps) {
    return (
        <label
            className={cn(
                'group flex min-h-12 cursor-pointer items-center gap-3 rounded-xl border bg-card px-3 py-2 text-sm font-medium transition',
                checked
                    ? 'border-primary bg-primary/10 text-main shadow-sm'
                    : 'border-border text-main hover:border-primary/50 hover:bg-surface',
                className,
            )}
        >
            <input
                type="checkbox"
                checked={checked}
                onChange={onChange}
                className="peer sr-only"
            />
            <span
                className={cn(
                    'grid h-5 w-5 shrink-0 place-items-center rounded-md border transition peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background',
                    checked
                        ? 'border-primary bg-primary text-white'
                        : 'border-border bg-card text-transparent',
                )}
            >
                <svg
                    aria-hidden="true"
                    viewBox="0 0 16 16"
                    className="h-3.5 w-3.5"
                    fill="none"
                >
                    <path
                        d="M3.5 8.2 6.7 11.4 12.8 4.6"
                        stroke="currentColor"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth="2.4"
                    />
                </svg>
            </span>
            <span className="leading-snug">{label}</span>
        </label>
    );
}