"use client";
import { type ReactNode, useId, useState } from "react";

export function Tabs({
  tabs,
  initial = 0,
}: {
  tabs: Array<{ label: string; content: ReactNode }>;
  initial?: number;
}) {
  const [i, setI] = useState(initial);
  const id = useId();
  return (
    <div>
      <div role="tablist" className="flex gap-1 border-b hairline">
        {tabs.map((tab, k) => (
          <button
            key={tab.label}
            type="button"
            role="tab"
            id={`${id}-tab-${k}`}
            aria-selected={i === k}
            aria-controls={`${id}-panel-${k}`}
            tabIndex={i === k ? 0 : -1}
            onClick={() => setI(k)}
            onKeyDown={(e) => {
              if (e.key === "ArrowRight") setI((i + 1) % tabs.length);
              if (e.key === "ArrowLeft") setI((i - 1 + tabs.length) % tabs.length);
            }}
            className={`-mb-px border-b-2 px-3 py-2 text-sm ${i === k ? "border-[var(--accent)] font-medium" : "border-transparent muted"}`}
          >
            {tab.label}
          </button>
        ))}
      </div>
      {tabs.map((tab, k) => (
        <div
          key={tab.label}
          role="tabpanel"
          id={`${id}-panel-${k}`}
          aria-labelledby={`${id}-tab-${k}`}
          hidden={i !== k}
          className="pt-4"
        >
          {tab.content}
        </div>
      ))}
    </div>
  );
}