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

const Checkbox = ({ checked, onChange, label, description }) => {
  return (
    <>
      {/* Checkbox */}
      <div className={styles.checkboxMainContainer}>
        <div className={styles.checkboxContainer}>
          <div className={styles.checkbox}>
            {/* Checkbox */}
            <div className={styles.check}>
              <input
                type="checkbox"
                checked={checked}
                onChange={onChange}
                className={styles.hiddenCheckbox}
              />
            </div>
            {/* List */}
            <div className={styles.list}>
              <p className={styles.placeholderTxt}>{label}</p>
              <p className={styles.secondaryTxt}>{description}</p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Checkbox;