"use client";

import Link from "next/link";
import { cn } from "@/lib/utils";
import { Calendar, User, MapPin } from "lucide-react";

const views = [
  { key: "year", label: "Year", icon: Calendar },
  { key: "recipient", label: "Recipient", icon: User },
  { key: "location", label: "Location", icon: MapPin },
];

export function LettersNav({ currentView }: { currentView: string }) {
  return (
    <div className="flex gap-2 border-b border-border pb-3">
      {views.map((v) => {
        const Icon = v.icon;
        const isActive = currentView === v.key;
        return (
          <Link
            key={v.key}
            href={`/letters?view=${v.key}`}
            className={cn(
              "flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors",
              isActive
                ? "bg-primary/10 text-primary"
                : "text-muted-foreground hover:bg-muted hover:text-foreground",
            )}
          >
            <Icon className="size-4" />
            {v.label}
          </Link>
        );
      })}
    </div>
  );
}