import { Fragment, ReactNode, useState } from "react";

interface TabProps {
  id: string;
  label: string;
}

interface TabControllerProps {
  tabs: TabProps[];
  children: ReactNode[];
}

export default function TabController({ tabs, children }: TabControllerProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const handleTabClick = (index: number) => {
    setCurrentIndex(index);
  };

  return (
    <div>
      <div>
        <div className="container navbar">
          {tabs.map((tab, index) => (
            <button
              key={tab.id}
              className={
                currentIndex === index ? "tab-button active" : "tab-button"
              }
              onClick={() => handleTabClick(index)}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>
      {children.map((child, index) => (
        <Fragment key={index}>
          <div style={{ display: currentIndex === index ? "block" : "none" }}>
            {child}
          </div>
        </Fragment>
      ))}
    </div>
  );
}