import { motion } from 'framer-motion';
import { cn } from '@/lib/cn';

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

export function Checkbox({ checked, onChange, label, disabled, className }: CheckboxProps) {
  return (
    <label
      className={cn(
        'inline-flex items-center gap-2.5 cursor-pointer select-none',
        disabled && 'opacity-50 cursor-not-allowed',
        className
      )}
    >
      <button
        type="button"
        role="checkbox"
        aria-checked={checked}
        onClick={() => !disabled && onChange(!checked)}
        className={cn(
          'w-5 h-5 rounded flex items-center justify-center border transition-all duration-200',
          checked
            ? 'bg-amber-500 border-amber-500'
            : 'bg-bg-elevated border-white/20 hover:border-white/40'
        )}
      >
        <motion.svg
          viewBox="0 0 12 12"
          className="w-3 h-3"
          initial={false}
        >
          <motion.path
            d="M2 6L5 9L10 3"
            fill="none"
            stroke="white"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
            initial={{ pathLength: 0, opacity: 0 }}
            animate={{ pathLength: checked ? 1 : 0, opacity: checked ? 1 : 0 }}
            transition={{ duration: 0.2, type: 'spring', stiffness: 500, damping: 30 }}
          />
        </motion.svg>
      </button>
      {label && <span className="text-sm text-text-secondary">{label}</span>}
    </label>
  );
}
