"use client";

import { Globe2, Map } from "lucide-react";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import { cn } from "@/lib/utils";

const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;

interface ViewSwitcherProps {
  activeContinent?: string;
}

export function ViewSwitcher({ activeContinent }: ViewSwitcherProps) {
  const tSwitcher = useTranslations("viewSwitcher");
  const tContinents = useTranslations("continents");

  return (
    <div className="flex flex-wrap items-center gap-2">
      <Link
        href="/"
        className={cn(
          "flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
          !activeContinent
            ? "border-[var(--accent-cyan)]/30 bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
            : "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
        )}
      >
        <Globe2 className="h-3 w-3" />
        {tSwitcher("global")}
      </Link>
      {continentSlugs.map((slug) => (
        <Link
          key={slug}
          href={`/continent/${slug}`}
          className={cn(
            "flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
            activeContinent === slug
              ? "border-[var(--accent-purple)]/30 bg-[var(--accent-purple)]/10 text-[var(--accent-purple)]"
              : "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
          )}
        >
          <Map className="h-3 w-3" />
          {tContinents(slug)}
        </Link>
      ))}
    </div>
  );
}