"use client";

import * as React from "react";
import { Check } from "lucide-react";
import { motion } from "framer-motion";

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

export function Checkbox({ label, desc, checked, onChange }: CheckboxProps) {
  return (
    <button
      type="button"
      onClick={onChange}
      className={`w-full p-4 rounded-xl border-2 text-left transition-all duration-300 flex items-start gap-3 focus:outline-none overflow-hidden relative ${
        checked
          ? "border-slate-900 bg-slate-900 text-white"
          : "border-slate-100 bg-white hover:border-slate-200"
      }`}
    >
      <div
        className={`mt-0.5 w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-all duration-500 ${checked ? "border-white bg-white text-slate-900 scale-110" : "border-slate-200"}`}
      >
        {checked && (
          <motion.div
            initial={{ scale: 0, rotate: -45 }}
            animate={{ scale: 1, rotate: 0 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
          >
            <Check size={14} strokeWidth={4} />
          </motion.div>
        )}
      </div>
      <div className="flex-grow">
        <h4
          className={`text-base font-bold mb-0.5 transition-colors duration-500 ${checked ? "text-white" : "text-slate-900"}`}
        >
          {label}
        </h4>
        {desc && (
          <p
            className={`text-sm leading-relaxed transition-colors duration-500 ${checked ? "text-slate-300" : "text-slate-500"}`}
          >
            {desc}
          </p>
        )}
      </div>
      {checked && (
        <motion.div
          layoutId={`check-bg-${label}`}
          className="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 -z-10"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
        />
      )}
    </button>
  );
}
