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

interface Props {
  onClose: () => void;
  onSave: (disco: { mediatype: string, size: number }) => void;
}

const ModalAnadirDisco: React.FC<Props> = ({ onClose, onSave }) => {
  const [mediatype, setMediatype] = useState('SSD');
  const [size, setSize] = useState('');

  const handleSave = () => {
    if (size && parseInt(size, 10) > 0) {
      onSave({ mediatype, size: parseInt(size, 10) });
    }
  };

  return (
    <div className={styles.modalOverlay}>
      <div className={styles.modal}>
        <h3>Añadir Disco Manualmente</h3>
        <label>Tipo de Disco</label>
        <select value={mediatype} onChange={e => setMediatype(e.target.value)} className={styles.modalInput}>
          <option value="SSD">SSD</option>
          <option value="HDD">HDD</option>
        </select>
        <label>Tamaño (GB)</label>
        <input
          type="number"
          value={size}
          onChange={e => setSize(e.target.value)}
          className={styles.modalInput}
          placeholder="Ej: 500"
        />
        <div className={styles.modalActions}>
          <button onClick={handleSave} className={`${styles.btn} ${styles.btnPrimary}`} disabled={!size}>Guardar</button>
          <button onClick={onClose} className={`${styles.btn} ${styles.btnSecondary}`}>Cancelar</button>
        </div>
      </div>
    </div>
  );
};

export default ModalAnadirDisco;