// frontend/src/components/ModalAnadirRam.tsx
import React, { useState } from 'react';
import styles from './SimpleTable.module.css';

interface Props {
  onClose: () => void;
  onSave: (ram: { slot: string, tamano: number, fabricante?: string, velocidad?: number }) => void;
}

const ModalAnadirRam: React.FC<Props> = ({ onClose, onSave }) => {
  const [ram, setRam] = useState({ slot: '', tamano: '', fabricante: '', velocidad: '' });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setRam(prev => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSave = () => {
    onSave({
      slot: ram.slot,
      tamano: parseInt(ram.tamano, 10),
      fabricante: ram.fabricante || undefined,
      velocidad: ram.velocidad ? parseInt(ram.velocidad, 10) : undefined,
    });
  };

  return (
    <div className={styles.modalOverlay}>
      <div className={styles.modal}>
        <h3>Añadir Módulo de RAM</h3>
        <label>Slot (Requerido)</label>
        <input type="text" name="slot" value={ram.slot} onChange={handleChange} className={styles.modalInput} placeholder="Ej: DIMM0" />
        <label>Tamaño (GB) (Requerido)</label>
        <input type="number" name="tamano" value={ram.tamano} onChange={handleChange} className={styles.modalInput} placeholder="Ej: 8" />
        <label>Fabricante (Opcional)</label>
        <input type="text" name="fabricante" value={ram.fabricante} onChange={handleChange} className={styles.modalInput} />
        <label>Velocidad (MHz) (Opcional)</label>
        <input type="number" name="velocidad" value={ram.velocidad} onChange={handleChange} className={styles.modalInput} />
        <div className={styles.modalActions}>
          <button onClick={handleSave} className={`${styles.btn} ${styles.btnPrimary}`} disabled={!ram.slot || !ram.tamano}>Guardar</button>
          <button onClick={onClose} className={`${styles.btn} ${styles.btnSecondary}`}>Cancelar</button>
        </div>
      </div>
    </div>
  );
};

export default ModalAnadirRam;