"use client";

import { useState, type ReactNode } from "react";

export interface TabItem {
  id: string;
  label: string;
  panel: ReactNode;
}

/** Pill-style tabbed panels. Panels are rendered server-side and passed in. */
export function Tabs({ items }: { items: TabItem[] }) {
  const [active, setActive] = useState(items[0]?.id);

  return (
    <div>
      <div className="mb-10 flex flex-wrap gap-2.5">
        {items.map((item) => {
          const isActive = item.id === active;
          return (
            <button
              key={item.id}
              onClick={() => setActive(item.id)}
              aria-pressed={isActive}
              className={`btn-pill px-5 py-2.5 text-sm ${
                isActive
                  ? "bg-gradient-to-r from-leaf-deep via-teal to-sky text-white shadow-soft"
                  : "border border-line bg-paper text-ink-soft hover:border-leaf/50 hover:text-leaf-deep"
              }`}
            >
              {item.label}
            </button>
          );
        })}
      </div>

      {items.map((item) => (
        <div key={item.id} className={item.id === active ? "block" : "hidden"}>
          {item.panel}
        </div>
      ))}
    </div>
  );
}