"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTranslation } from "react-i18next";

import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const segments = [
  { suffix: "/occupancy", key: "occupancy", label: "subnavOccupancy" },
  { suffix: "/hot", key: "hot", label: "subnavHot" },
  { suffix: "/sold-out", key: "sold-out", label: "subnavSoldOut" },
  { suffix: "/pools", key: "pools", label: "subnavPools" },
] as const;

export function RiskSubnav({ drawId }: { drawId: string }) {
  const { t } = useTranslation("risk");
  const pathname = usePathname();
  const base = `/admin/draws/${drawId}/risk`;

  return (
    <nav className="mb-6 flex flex-wrap gap-2 border-b border-border pb-3">
      {segments.map(({ suffix, key, label }) => {
        const href = `${base}${suffix}`;
        const active =
          pathname === href ||
          (key === "pools" && pathname?.startsWith(`${base}/pools`));

        return (
          <Link
            key={key}
            href={href}
            className={cn(buttonVariants({ variant: active ? "default" : "outline", size: "sm" }))}
          >
            {t(label)}
          </Link>
        );
      })}
      <Link
        href="/admin/draws"
        className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "ml-auto")}
      >
        {t("changeDraw")}
      </Link>
    </nav>
  );
}
