"use client";

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

export interface TabItem {
  key: string;
  label: string;
  icon?: ReactNode;
  content: ReactNode;
}

/** Small client tabs widget — used by the Account Deletion Guide to switch between
 *  platform-specific instructions (Webpage / iOS app / Android app) without shipping
 *  a full carousel/accordion library. */
export default function Tabs({ items, defaultKey }: { items: TabItem[]; defaultKey?: string }) {
  const [active, setActive] = useState(defaultKey || items[0]?.key);
  const activeItem = items.find((i) => i.key === active) || items[0];

  return (
    <div>
      <div role="tablist" className="flex flex-wrap gap-2 border-b border-neutral-300 pb-0">
        {items.map((item) => (
          <button
            key={item.key}
            role="tab"
            type="button"
            aria-selected={item.key === active}
            onClick={() => setActive(item.key)}
            className={`inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-t-lg border border-b-0 -mb-px transition-colors ${
              item.key === active
                ? "bg-bg border-neutral-300 text-ink"
                : "bg-transparent border-transparent text-neutral-600 hover:text-ink"
            }`}
          >
            {item.icon}
            {item.label}
          </button>
        ))}
      </div>
      <div role="tabpanel" className="border border-neutral-300 rounded-b-lg rounded-tr-lg p-6 sm:p-8">
        {activeItem?.content}
      </div>
    </div>
  );
}