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 className="block">
      <div className="tabs is-boxed is-centered">
        <ul>
          {tabs.map((tab, index) => (
            <li className={currentIndex === index ? "is-active" : ""}>
              <a onClick={() => handleTabClick(index)}>{tab.label}</a>
            </li>
          ))}
        </ul>
      </div>
      <div>
        {children.map((child, index) => (
          <Fragment key={index}>
            <div style={{ display: currentIndex === index ? "block" : "none" }}>
              {child}
            </div>
          </Fragment>
        ))}
      </div>
    </div>
  );
}
