"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";

type TabItem = {
  id: string;
  label: string;
  content: React.ReactNode;
};

type TabsProps = {
  items: TabItem[];
  defaultTab?: string;
};

export function Tabs({ items, defaultTab }: TabsProps) {
  const [activeTab, setActiveTab] = useState(defaultTab ?? items[0]?.id);

  return (
    <div>
      <div className="mb-4 flex flex-wrap gap-2 rounded-xl bg-[#edf2fb] p-1">
        {items.map((item) => (
          <button
            key={item.id}
            className={cn(
              "rounded-lg px-3 py-1.5 text-sm font-semibold transition-colors",
              activeTab === item.id ? "bg-white text-[#0f2a5f] shadow-sm" : "text-[#6f7b93] hover:bg-white/70",
            )}
            onClick={() => setActiveTab(item.id)}
            type="button"
          >
            {item.label}
          </button>
        ))}
      </div>
      <div>
        {items.map((item) => (
          <div key={item.id} hidden={item.id !== activeTab}>
            {item.id === activeTab ? item.content : null}
          </div>
        ))}
      </div>
    </div>
  );
}
