import React, { useState, useEffect } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

const InteractiveTimerWidget = () => {
  // Estado para el cronómetro
  const [timerActive, setTimerActive] = useState(false);
  const [timerTime, setTimerTime] = useState(0);
  const [timerInterval, setTimerInterval] = useState(null);

  // Estado para el temporizador
  const [countdownActive, setCountdownActive] = useState(false);
  const [countdownTime, setCountdownTime] = useState(60); // Iniciar en 60 segundos
  const [countdownInterval, setCountdownInterval] = useState(null);

  // Función para manejar el cronómetro
  const handleTimer = () => {
    if (timerActive) {
      clearInterval(timerInterval);
      setTimerActive(false);
    } else {
      setTimerActive(true);
      setTimerInterval(setInterval(() => {
        setTimerTime(prevTime => prevTime + 1);
      }, 1000));
    }
  };

  // Función para manejar el temporizador
  const handleCountdown = () => {
    if (countdownActive) {
      clearInterval(countdownInterval);
      setCountdownActive(false);
    } else {
      setCountdownActive(true);
      setCountdownInterval(setInterval(() => {
        setCountdownTime(prevTime => prevTime - 1);
      }, 1000));
    }
  };

  // Efecto para reiniciar el temporizador cuando llegue a 0
  useEffect(() => {
    if (countdownTime === 0 && countdownActive) {
      clearInterval(countdownInterval);
      setCountdownActive(false);
      setCountdownTime(60);
    }
  }, [countdownTime, countdownActive, countdownInterval]);

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Cronómetro y Temporizador</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col items-center space-y-4">
          {/* Cronómetro */}
          <div>
            <h2 className="text-2xl font-bold">{timerTime} segundos</h2>
            <Button onClick={handleTimer}>
              {timerActive ? 'Detener' : 'Iniciar'}
            </Button>
          </div>

          {/* Temporizador */}
          <div>
            <h2 className="text-2xl font-bold">{countdownTime} segundos</h2>
            <Button onClick={handleCountdown}>
              {countdownActive ? 'Detener' : 'Iniciar'}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default InteractiveTimerWidget;
 <script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>