import { useCountdown } from '@camarauth/sdk/react';

function Timer() {
  const { timeLeft, formattedTime, isExpired, start, restart } = useCountdown({
    seconds: 180,
    onExpire: () => console.log('¡Expiró!')
  });

  return (
    <div>
      <p>Tiempo restante: {formattedTime}</p>
      {isExpired && <p>¡Tiempo agotado!</p>}
      <button onClick={start}>Iniciar</button>
      <button onClick={() => restart(180)}>Reiniciar</button>
    </div>
  );
}

import { useCountdown } from '@camarauth/sdk/react';

function ExamTimer() {
  const { 
    formattedTime, 
    isExpired, 
    isRunning,
    start, 
    stop, 
    restart 
  } = useCountdown({
    seconds: 3600, // 1 hora
    onExpire: () => alert('¡Tiempo de examen terminado!')
  });

  return (
    <div className={`timer ${isExpired ? 'expired' : ''}`}>
      <div className="time-display">
        {formattedTime}
      </div>
      
      <div className="controls">
        {!isRunning ? (
          <button onClick={start}>▶️ Iniciar</button>
        ) : (
          <button onClick={stop}>⏸️ Pausar</button>
        )}
        
        <button onClick={() => restart(3600)}>
          🔄 Reiniciar
        </button>
      </div>
      
      {isExpired && (
        <div className="expired-message">
          ⏰ ¡Tiempo agotado!
        </div>
      )}
    </div>
  );
}