"use client";

import Link from "next/link";
import { Globe2, Map } from "lucide-react";
import { cn } from "@/lib/utils";

const continents = [
  { slug: "asia", label: "Asia" },
  { slug: "europe", label: "Europe" },
  { slug: "americas", label: "Americas" },
  { slug: "africa", label: "Africa" },
  { slug: "oceania", label: "Oceania" },
];

interface ViewSwitcherProps {
  activeContinent?: string;
}

export function ViewSwitcher({ activeContinent }: ViewSwitcherProps) {
  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" />
        Global
      </Link>
      {continents.map((c) => (
        <Link
          key={c.slug}
          href={`/continent/${c.slug}`}
          className={cn(
            "flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
            activeContinent === c.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" />
          {c.label}
        </Link>
      ))}
    </div>
  );
}