Tabs

"use client";

import * as React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface TabItem<T extends string> {
  value: T;
  label: React.ReactNode;
  disabled?: boolean;
}

export interface TabsProps<T extends string> {
  items: readonly TabItem<T>[];
  value?: T;
  defaultValue?: T;
  onValueChange?: (value: T) => void;
  variant?: "underline" | "pill";
  className?: string;
  "aria-label"?: string;
}

export function Tabs<T extends string>({
  items,
  value,
  defaultValue,
  onValueChange,
  variant = "underline",
  className,
  ...aria
}: TabsProps<T>) {
  const id = React.useId();
  const [internal, setInternal] = React.useState<T>(defaultValue ?? items[0]?.value);
  const current = value ?? internal;
  const refs = React.useRef<(HTMLButtonElement | null)[]>([]);

  const select = (v: T) => {
    if (value === undefined) setInternal(v);
    onValueChange?.(v);
  };

  const onKeyDown = (e: React.KeyboardEvent, i: number) => {
    const enabled = items.map((it, idx) => (it.disabled ? -1 : idx)).filter((x) => x >= 0);
    const pos = enabled.indexOf(i);
    let next: number | undefined;
    if (e.key === "ArrowRight") next = enabled[(pos + 1) % enabled.length];
    if (e.key === "ArrowLeft") next = enabled[(pos - 1 + enabled.length) % enabled.length];
    if (e.key === "Home") next = enabled[0];
    if (e.key === "End") next = enabled[enabled.length - 1];
    if (next === undefined) return;
    e.preventDefault();
    select(items[next].value);
    refs.current[next]?.focus();
  };

  return (
    <div
      role="tablist"
      aria-label={aria["aria-label"]}
      className={cn(
        "relative flex",
        variant === "underline" ? "gap-1 border-b border-border" : "gap-1 rounded-lg bg-muted p-1",
        className,
      )}
    >
      {items.map((item, i) => {
        const active = item.value === current;
        return (
          <button
            key={item.value}
            ref={(el) => {
              refs.current[i] = el;
            }}
            role="tab"
            type="button"
            aria-selected={active}
            tabIndex={active ? 0 : -1}
            disabled={item.disabled}
            onClick={() => select(item.value)}
            onKeyDown={(e) => onKeyDown(e, i)}
            className={cn(
              "relative px-3 text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40",
              variant === "underline" ? "h-10 rounded-t-md" : "h-8 rounded-md",
              active ? "text-foreground" : "text-muted-foreground hover:text-foreground",
            )}
          >
            {active &&
              (variant === "underline" ? (
                <motion.span layoutId={`${id}-tab`} className="absolute inset-x-1 -bottom-px h-0.5 rounded-full bg-foreground" transition={{ type: "spring", bounce: 0.15, duration: 0.4 }} />
              ) : (
                <motion.span layoutId={`${id}-tab`} className="absolute inset-0 rounded-md bg-background shadow-sm ring-1 ring-border" transition={{ type: "spring", bounce: 0.15, duration: 0.4 }} />
              ))}
            <span className="relative">{item.label}</span>
          </button>
        );
      })}
    </div>
  );
}