import clsx from 'clsx';
import { useState } from 'react';
import { IoCheckmark } from 'react-icons/io5';
import style from './index.module.scss';

interface CheckboxProps {
  label?: string;
  onChange?: (checked: boolean) => void;
  defaultChecked?: boolean;
}

const Checkbox = ({
  label,
  onChange,
  defaultChecked = false,
}: CheckboxProps) => {
  const [isChecked, setIsChecked] = useState(defaultChecked);

  const handleToggle = () => {
    setIsChecked(!isChecked);
    onChange?.(!isChecked);
  };

  return (
    <div className={style.checkbox} onClick={handleToggle}>
      <div className={`${style.box} ${isChecked ? style.checked : ''}`}>
        <IoCheckmark
          size={10}
          className={`  ${isChecked ? 'text-white' : 'text-white'}`}
        />
      </div>
      {label && (
        <span className={clsx(style.label, 'fw-bold text-black mb-0 pb-0')}>
          {label}
        </span>
      )}
    </div>
  );
};

export default Checkbox;