'use client';

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

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-5 rounded-[2rem] border-2 text-left transition-all duration-300 flex items-start gap-4 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-1 w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 ${checked ? 'border-white bg-white text-slate-900' : 'border-slate-200'}`}>
        {checked && <Check size={14} strokeWidth={4} />}
      </div>
      <div className="flex-grow">
        <h4 className={`text-xl font-bold mb-1 ${checked ? 'text-white' : 'text-slate-900'}`}>{label}</h4>
        {desc && <p className={`text-base leading-relaxed ${checked ? 'text-slate-300' : 'text-slate-500'}`}>{desc}</p>}
      </div>
    </button>
  );
}
