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

export type CheckboxWithTextProps = {
  text: string,
  className?: string,
  checkboxClassName?: string,
  textClassName?: string,
  onChange?: (value: React.FormEvent<HTMLInputElement>) => void
}

function CheckboxWithText({
  text,
  className = "",
  checkboxClassName = "",
  textClassName = "",
  onChange
}: CheckboxWithTextProps): JSX.Element {

  return (
    <div className={`${styles.container} ${className}`}>
      <label className={`${styles["container__input"]} ${checkboxClassName}`}>
        <input className={styles["container__checkbox"]} type="checkbox" onChange={onChange} />
        <span className={styles["container__checkmark"]}></span>
      <span className={`${styles["container__text"]} ${textClassName}`}>{text}</span>
      </label>
    </div>
  )
}

export default CheckboxWithText
