import type { ReactNode } from "react";

import { useCheckboxFilterContext } from "../CheckboxFilter/CheckboxFilter";

import styles from "./Checkbox.module.scss";

export default function Checkbox({
  value,
  children,
}: {
  value: string;
  children: ReactNode;
}) {
  const { selectedValues, onSelect } = useCheckboxFilterContext();

  const isSelected = selectedValues.includes(value);

  function handleChange() {
    onSelect(value);
  }

  return (
    <div className={styles["checkbox"]}>
      <input
        type="checkbox"
        id={value}
        checked={isSelected}
        onChange={handleChange}
        className={styles["checkbox__input"]}
      />

      <label htmlFor={value} className={styles["checkbox__label"]}>
        {children}
      </label>
    </div>
  );
}