import { useEffect, useState } from 'react';

// Indicador de proceso largo (ej. consultas a la IA): spinner, mensaje y segundos transcurridos,
// para que el usuario sepa que el sistema esta trabajando y no colgado.
export function BusyPanel({ message, hint }) {
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="busy-panel" role="status" aria-live="polite">
      <div className="busy-spinner" aria-hidden="true" />
      <div>
        <div className="busy-message">{message} <span className="text-muted">({seconds}s)</span></div>
        {hint && <div className="text-muted busy-hint">{hint}</div>}
      </div>
    </div>
  );
}