"use client";

import { useState } from "react";

export function StatsTabs({ tabs }: { tabs: { id: string; label: string; content: React.ReactNode }[] }) {
  const [active, setActive] = useState(tabs[0]?.id);

  return (
    <div>
      <div className="flex flex-wrap gap-2 mb-6 border-b border-white/10 pb-4">
        {tabs.map((t) => (
          <button
            key={t.id}
            type="button"
            onClick={() => setActive(t.id)}
            className={`text-xs uppercase tracking-[0.1em] rounded-full px-4 py-2 border transition-colors ${
              active === t.id
                ? "border-white bg-white/10 text-[var(--rk-ink)]"
                : "border-white/15 text-[var(--rk-ink-muted)] hover:border-white/40"
            }`}
          >
            {t.label}
          </button>
        ))}
      </div>
      {tabs.map((t) => (
        <div key={t.id} className={t.id === active ? "flex flex-col gap-6" : "hidden"}>
          {t.content}
        </div>
      ))}
    </div>
  );
}