import { useState } from "react";
const Checkbox = (
    { 
        id, 
        label, 
        checked,
        changeEvent,
        ...props 
    }:
    { 
        id: string, 
        label: string, 
        checked: boolean,
        changeEvent: (id: string, checked: boolean) => void
    }) => 
{
  const defaultChecked = checked ? checked : false;
  const [isChecked, setIsChecked] = useState(defaultChecked);

  return (
    <div className="checkbox-wrapper">
      <label>
        <input 
            id={id}
            type="checkbox" 
            checked={isChecked} 
            onChange=
            {
                () => 
                {
                    setIsChecked((prev) => !prev);
                    changeEvent(id, !checked); // now is the opposite
                }
            }
            {...props}
        />
        <span>{label}</span>
      </label>
    </div>
  );
};
export default Checkbox;
