import StateCheck from "./StateCheck";
import react from "react";

function LabelCheck({
  PrefixTitle,
  SuffixTitle,
  Count,
  Icon,
  Bg,
  oncheckchange,
  checked,
  keyv,
}) {
  let refinput = react.createRef();
  const [firstload, setFirstLoad] = react.useState(true);


  react.useEffect(() => {
    if ( keyv !== -10 && !firstload) {
        if(refinput.current?.checked !==checked){
          refinput.current?.click();
        }
    }
    setFirstLoad(false)

  }, [checked]);

  return (
    <div className=" grow items-center  inline-flex">
      <input
        id={`shutdown-7`+ keyv}
        type="checkbox"
        ref={refinput}
        onChange={oncheckchange}
        // checked={checked}
        defaultChecked={true}
        className={`rounded ring-1   py-1 h-4 w-4 mr-2 border-0 focus:ring-1 text-${Bg} ${Bg} cursor-pointer`}
      ></input>
      <label htmlFor="shutdown-7" className=" block text-base text-gray-900 cursor-pointer  ">
        <StateCheck
          Title={
            <label className="cursor-pointer">
              {PrefixTitle}{" "}
              <span className={`font-bold  text-base text-${Bg}`}>{Count}</span>{" "}
              {SuffixTitle}
            </label>
          }
          Icon={Icon}
        ></StateCheck>
      </label>
    </div>
  );
}

export default LabelCheck;