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

interface RadioOption {
  value: string
  label: string
  icon?: React.ReactNode
}

interface Props {
  label?: string
  helpIcon?: React.ReactNode
  options: RadioOption[]
  value: string
  onChange: (value: string) => void
  name: string
  className?: string
}

const ModalRadioGroup: React.FC<Props> = ({ 
  label, 
  helpIcon, 
  options, 
  value, 
  onChange, 
  name,
  className = ''
}) => {
  return (
    <div className={`${styles.container} ${className}`}>
      {label && (
        <div className={styles.labelRow}>
          <label className={styles.label}>{label}</label>
          {helpIcon && (
            <button 
              type="button"
              className={styles.helpButton}
              aria-label="Ayuda"
            >
              {helpIcon}
            </button>
          )}
        </div>
      )}
      
      <div className={styles.optionsContainer}>
        {options.map((option) => (
          <label key={option.value} className={styles.option}>
            <input
              type="radio"
              name={name}
              value={option.value}
              checked={value === option.value}
              onChange={(e) => onChange(e.target.value)}
              className={styles.radioInput}
            />
            <span className={styles.radioCustom}></span>
            {option.icon && <span className={styles.icon}>{option.icon}</span>}
            <span className={styles.optionLabel}>{option.label}</span>
          </label>
        ))}
      </div>
    </div>
  )
}

export default ModalRadioGroup