import React from 'react'
import styles from './ModalCheckbox.module.css'

interface Props {
  checked: boolean
  onChange: (checked: boolean) => void
  label: string
  helpIcon?: React.ReactNode
  subtext?: string
  className?: string
}

const ModalCheckbox: React.FC<Props> = ({
  checked,
  onChange,
  label,
  helpIcon,
  subtext,
  className = ''
}) => {
  return (
    <div className={`${styles.container} ${className}`}>
      <label className={styles.labelWrapper}>
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => onChange(e.target.checked)}
          className={styles.input}
        />
        <span className={styles.checkbox}>
          {checked && (
            <svg width="12" height="10" viewBox="0 0 12 10" fill="none">
              <path
                d="M1 5L4.5 8.5L11 1"
                stroke="white"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          )}
        </span>
        <span className={styles.label}>
          {label}
          {helpIcon && (
            <button
              type="button"
              className={styles.helpButton}
              aria-label="Ayuda"
            >
              {helpIcon}
            </button>
          )}
        </span>
      </label>
      {subtext && <p className={styles.subtext}>{subtext}</p>}
    </div>
  )
}

export default ModalCheckbox