import styles from "./styles.module.css";

interface ICheckboxProps {
  checked: boolean;
  onChange: () => void;
}

function Checkbox({ checked, onChange }: ICheckboxProps) {
  return (
    <div className={styles["checkbox-wrapper-4"]}>
      <input
        checked={checked}
        className={styles["inp-cbx"]}
        id="morning"
        type="checkbox"
        onChange={onChange}
      />
      <label className={styles["cbx"]} htmlFor="morning">
        <span>
          <svg width="12px" height="10px">
            <use xlinkHref="#check-4"></use>
          </svg>
        </span>
      </label>
      <svg className={styles["inline-svg"]}>
        <symbol id="check-4" viewBox="0 0 12 10">
          <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
        </symbol>
      </svg>
    </div>
  );
}

export default Checkbox;
