import { ReactNode } from "react";

type TabItem = {
  key: string;
  title: string;
  content: ReactNode;
};

type TabsProps = {
  items: TabItem[];
  active: string;
  onChange: (key: string) => void;
};

export default function Tabs({ items, active, onChange }: TabsProps) {
  return (
    <div>
      <ul className="nav nav-tabs mb-3">
        {items.map((item) => (
          <li key={item.key} className="nav-item">
            <button
              className={`nav-link ${item.key === active ? "active" : ""}`}
              onClick={() => onChange(item.key)}
            >
              {item.title}
            </button>
          </li>
        ))}
      </ul>
      <div>
        {items.find((item) => item.key === active)?.content}
      </div>
    </div>
  );
}