import React from "react";

interface ToggleHeaderProps {
  options: string[]; // Array of strings representing the options
  activeOption: string; // The currently active option
  handleClick: (option: string) => void; // Function to handle click events
}

const ToggleHeader: React.FC<ToggleHeaderProps> = ({
  options,
  activeOption,
  handleClick,
}) => {
  return (
    <div className="toggle-header-container">
      {options.map((option, index) => (
        <div
          key={index}
          className={`toggle-header-item ${
            option === activeOption ? "active" : ""
          }`}
          onClick={() => handleClick(option)} // Call handleClick when an option is clicked
        >
          {option}
        </div>
      ))}
    </div>
  );
};

export default ToggleHeader;