import { useState, type ReactNode } from "react";
import { cn } from "../../lib/cn";

export type TabsItem = {
  content?: ReactNode;
  label: string;
  value: string;
};

export function Tabs({
  contentClassName,
  defaultValue,
  items,
  listClassName,
  panelClassName,
  value,
  onValueChange,
}: {
  contentClassName?: string;
  defaultValue?: string;
  items: TabsItem[];
  listClassName?: string;
  panelClassName?: string;
  value?: string;
  onValueChange?: (value: string) => void;
}) {
  const [internalValue, setInternalValue] = useState(defaultValue ?? items[0]?.value);
  const activeValue = value ?? internalValue ?? items[0]?.value;
  const activeItem = items.find((item) => item.value === activeValue) ?? items[0];

  function handleChange(nextValue: string) {
    if (value === undefined) {
      setInternalValue(nextValue);
    }

    onValueChange?.(nextValue);
  }

  return (
    <div className="grid gap-4">
      <div
        aria-orientation="horizontal"
        className={cn(
          "flex gap-2 border-b border-[var(--uhuru-border-subtle)]",
          listClassName,
        )}
        role="tablist"
      >
        {items.map((item) => {
          const active = item.value === activeValue;
          return (
            <button
              aria-selected={active}
              className={cn(
                "border-b-2 px-1 pb-3 text-sm transition",
                active
                  ? "border-[var(--uhuru-action-primary)] text-[var(--uhuru-text-primary)]"
                  : "border-transparent text-[var(--uhuru-text-secondary)]",
              )}
              key={item.value}
              onClick={() => handleChange(item.value)}
              role="tab"
              type="button"
            >
              {item.label}
            </button>
          );
        })}
      </div>

      {activeItem?.content ? (
        <div
          className={cn(
            "rounded-[min(var(--uhuru-radius-lg),1.125rem)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-muted)] p-4",
            panelClassName,
          )}
          role="tabpanel"
        >
          <div className={cn("text-[var(--uhuru-text-primary)]", contentClassName)}>
            {activeItem.content}
          </div>
        </div>
      ) : null}
    </div>
  );
}