export default function Example() {
  const [Check1, setCheck1] = useState(true);
  const [Check2, setCheck2] = useState(false);
  const [Check3, setCheck3] = useState(false);
  useEffect(() => {
    setCheck3(true);
  }, []);
  useEffect(() => {
    if (Check2 != Check3) {
      setCheck1("indeterminate");
    } else if (Check2 && Check3) {
      setCheck1(true);
    } else {
      setCheck1(false);
    }
  }, [Check2, Check3]);
  function HandleCategory(bool) {
    if (bool) {
      setCheck2(true);
      setCheck3(true);
    } else {
      setCheck2(false);
      setCheck3(false);
    }
  }
  return (
    <Box
      css={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        gap: "$100",
      }}
    >
      <Box
        onClick={() => HandleCategory(!Check1)}
        css={{
          cursor: "pointer",
          display: "flex",
          gap: "$025",
        }}
      >
        <Checkbox
          checked={Check1}
          variant="primary"
          isOutline
          size="125"
          id="cb1"
        >
          Category
        </Checkbox>
      </Box>
      <Box css={{ paddingLeft: "$100" }}>
        <Box
          onClick={() => setCheck2(!Check2)}
          css={{ cursor: "pointer", display: "flex", gap: "$025" }}
        >
          <Checkbox
            checked={Check2}
            variant="primary"
            isOutline
            size="125"
            id="cb2"
          >
            Option 1
          </Checkbox>
        </Box>
        <Box
          onClick={() => setCheck3(!Check3)}
          css={{
            cursor: "pointer",
            display: "flex",
            marginTop: "$100",
            gap: "$025",
          }}
        >
          <Checkbox
            checked={Check3}
            variant="primary"
            isOutline
            size="125"
            id="cb3"
          >
            Option 2
          </Checkbox>
        </Box>
      </Box>
    </Box>
  );
}