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

interface Props {
  label?: string
  helpIcon?: React.ReactNode
  dateValue: string
  hourValue: string
  minuteValue: string
  onDateChange: (value: string) => void
  onHourChange: (value: string) => void
  onMinuteChange: (value: string) => void
  timezone?: string
  className?: string
}

const ModalDateTimeGroup: React.FC<Props> = ({
  label,
  helpIcon,
  dateValue,
  hourValue,
  minuteValue,
  onDateChange,
  onHourChange,
  onMinuteChange,
  timezone = 'GMT-7',
  className = ''
}) => {
  // Generate hour options (00-23)
  const hours = Array.from({ length: 24 }, (_, i) => {
    const hour = i.toString().padStart(2, '0')
    return { value: hour, label: hour }
  })

  // Generate minute options (00-59)
  const minutes = Array.from({ length: 60 }, (_, i) => {
    const minute = i.toString().padStart(2, '0')
    return { value: minute, label: minute }
  })

  return (
    <div className={`${styles.container} ${className}`}>
      {label && (
        <div className={styles.labelRow}>
          <label className={styles.label}>
            {label} <span className={styles.timezone}>{timezone}</span>
          </label>
          {helpIcon && (
            <button 
              type="button"
              className={styles.helpButton}
              aria-label="Ayuda"
            >
              {helpIcon}
            </button>
          )}
        </div>
      )}
      
      <div className={styles.inputs}>
        <input
          type="date"
          value={dateValue}
          onChange={(e) => onDateChange(e.target.value)}
          className={styles.dateInput}
        />
        
        <select
          value={hourValue}
          onChange={(e) => onHourChange(e.target.value)}
          className={styles.timeSelect}
        >
          {hours.map((hour) => (
            <option key={hour.value} value={hour.value}>
              {hour.label}
            </option>
          ))}
        </select>
        
        <select
          value={minuteValue}
          onChange={(e) => onMinuteChange(e.target.value)}
          className={styles.timeSelect}
        >
          {minutes.map((minute) => (
            <option key={minute.value} value={minute.value}>
              {minute.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  )
}

export default ModalDateTimeGroup