import { useState, useEffect } from '@wordpress/element';
import { CheckboxControl } from '@wordpress/components';

type CheckboxProps = {
  id: string;
  label?: string;
  help?: string;
  defaultChecked?: boolean;
  onCheckedChange: (checked: boolean, id: string) => void;
};

export const Checkbox = ({ label, help, defaultChecked }: CheckboxProps) => {
  const [isChecked, setChecked] = useState(defaultChecked);

  useEffect(() => {
    setChecked(defaultChecked);
  }, [defaultChecked]);

  return (
    <div className="mx-1 flex items-center gap-2">
      <CheckboxControl
        label={label}
        help={help}
        checked={isChecked}
        onChange={setChecked}
      />
    </div>
  );
};