import { cn } from "@/lib/utils";
import type { TenderNavItem } from "../types";

export function TenderSectionNavList({
  items,
  activeId,
  onSelect,
  variant,
}: {
  items: TenderNavItem[];
  activeId: string;
  onSelect: (id: string) => void;
  variant: "rail" | "strip";
}) {
  if (variant === "strip") {
    return (
      <nav
        aria-label="Jump to section"
        className="no-scrollbar -mx-4 flex gap-2 overflow-x-auto px-4 pb-1 sm:-mx-6 sm:px-6"
      >
        {items.map((item) => {
          const isActive = activeId === item.id;
          return (
            <button
              key={item.id}
              type="button"
              onClick={() => onSelect(item.id)}
              className={cn(
                "shrink-0 rounded-full border px-3.5 py-2 text-xs font-semibold tracking-wide transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-dark-2",
                isActive
                  ? "border-primary/35 bg-primary/10 text-primary shadow-sm dark:border-primary/40 dark:bg-primary/15"
                  : "border-stroke/70 bg-white/80 text-dark-5 hover:border-primary/25 hover:text-dark dark:border-dark-3 dark:bg-dark-2/60 dark:text-dark-6 dark:hover:text-white",
              )}
            >
              {item.label}
            </button>
          );
        })}
      </nav>
    );
  }

  return (
    <nav aria-label="On this page" className="space-y-1">
      <p className="mb-3 text-[10px] font-semibold uppercase tracking-[0.22em] text-dark-5 dark:text-dark-6">
        On this page
      </p>
      <ul className="relative space-y-0.5 border-l border-stroke/60 pl-3 dark:border-dark-3">
        {items.map((item) => {
          const isActive = activeId === item.id;
          return (
            <li key={item.id}>
              <button
                type="button"
                onClick={() => onSelect(item.id)}
                className={cn(
                  "group relative flex w-full items-center rounded-lg py-2 pl-2.5 pr-2 text-left text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-dark-2",
                  isActive
                    ? "bg-primary/[0.08] text-primary dark:bg-primary/10"
                    : "text-dark-5 hover:bg-gray-2/80 hover:text-dark dark:text-dark-6 dark:hover:bg-dark-3/50 dark:hover:text-white",
                )}
              >
                <span
                  className={cn(
                    "absolute -left-px top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full transition",
                    isActive
                      ? "bg-primary"
                      : "bg-transparent group-hover:bg-stroke dark:group-hover:bg-dark-3",
                  )}
                  aria-hidden
                />
                <span className="line-clamp-2">{item.label}</span>
              </button>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}
