import React, { useState } from "react";
import OriginalHeader from "cypress/packages/runner/src/header/header"; 

const CustomHeader = (props) => {
  const [isPaused, setIsPaused] = useState(false);

  const togglePause = () => {
    if (isPaused) {
      window.__cypressResume(); // ✅ Resume execution
    } else {
      window.__cypressPause();  // ✅ Pause execution
    }
    setIsPaused(!isPaused);
  };

  return (
    <div className="header">
      <OriginalHeader {...props} />  {/* ✅ Keep existing Cypress UI */}

      {/* ✅ Append Pause/Resume Button */}
      <button
        onClick={togglePause}
        className="pause-resume-btn"
        style={{
          marginLeft: "10px",
          padding: "5px 10px",
          borderRadius: "5px",
          background: isPaused ? "#4CAF50" : "#FF4D4D",
          color: "#fff",
          border: "none",
          cursor: "pointer",
        }}
      >
        {isPaused ? "Resume" : "Pause"}
      </button>
    </div>
  );
};

export default CustomHeader;