"use client";

import { ReactNode, useState } from "react";

export default function Tabs({
  tabs,
}: {
  tabs: { label: string; content: ReactNode }[];
}) {
  const [active, setActive] = useState(0);
  return (
    <div>
      <div className="tabs__list">
        {tabs.map((t, i) => (
          <button
            key={t.label}
            onClick={() => setActive(i)}
            className={`tabs__tab ${active === i ? "tabs__tab--active" : ""}`}
          >
            {t.label}
          </button>
        ))}
      </div>
      <div className="tabs__panel">{tabs[active].content}</div>
    </div>
  );
}