"use client";
import { useState } from "react";
import CheckIcon from "../icons/check";
import styles from "./styles.module.css";
import CloseIcon from "../icons/close";
import CheckedIcon from "../icons/switchIcons/checked";
import UnCheckedIcon from "../icons/switchIcons/unchecked";

const CustomCheckbox = ({ checked, setChecked, id, ...props }) => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <>
      <input
        type="checkbox"
        id={id}
        className={styles.check}
        checked={checked}
        onChange={() => {
          setIsChecked(!isChecked);
          setChecked();
        }}
        {...props}
      />

      <label htmlFor={id} className={styles.switch}>
        <span className={styles.knob}>
          {isChecked ? (
            <CheckedIcon
              width={16}
              height={16}
              color="#4F378A"
              viewBox="0 0 20 20"
            />
          ) : (
            <UnCheckedIcon width={16} height={16} color="#fff" />
          )}
        </span>
      </label>
    </>
  );
};

export default CustomCheckbox;