import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let intervalId;

    if (isRunning) {
      intervalId = setInterval(() => {
        setSeconds((prevSeconds) => prevSeconds + 1);
      }, 1000);
    }

    return () => {
      if (intervalId) {
        clearInterval(intervalId);
      }
    };
  }, [isRunning]);

  const toggleTimer = () => {
    setIsRunning(!isRunning);
  };

  return (
    <div className="timer-container">
      <h2 className="timer-heading">Timer</h2>
      <p className="timer-text">
        {seconds} {seconds === 1 ? "second" : "seconds"} have elapsed.
      </p>
      <button onClick={toggleTimer} className="timer-button">
        {isRunning ? "Stop" : "Start"}
      </button>
    </div>
  );
}