import React from 'react'
import { BsInfoCircle } from 'react-icons/bs'
import styles from './ModalToggle.module.css'

interface Props {
  checked: boolean
  onChange: (checked: boolean) => void
  label: string
  helpText?: string
  helpLink?: string
  className?: string
}

/**
 * Componente de toggle/checkbox para modales
 * Estilo StreamYard: switch + texto + icono de ayuda opcional
 */
export const ModalToggle: React.FC<Props> = ({ 
  checked,
  onChange,
  label,
  helpText,
  helpLink,
  className = ''
}) => {
  return (
    <div className={`${styles.container} ${className}`}>
      <label className={styles.label}>
        <input 
          type="checkbox" 
          checked={checked} 
          onChange={(e) => onChange(e.target.checked)}
          className={styles.checkbox}
        />
        <span className={styles.slider}></span>
        <span className={styles.text}>{label}</span>
      </label>
      
      {(helpText || helpLink) && (
        <button 
          type="button"
          className={styles.helpButton}
          aria-label="Más información"
          onClick={() => helpLink && window.open(helpLink, '_blank')}
        >
          <BsInfoCircle size={16} />
        </button>
      )}
    </div>
  )
}

export default ModalToggle