import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { monthLabel, shiftMonth } from "@/lib/format";

export function MonthNav({ month, basePath, extra = {} }: { month: string; basePath: string; extra?: Record<string, string | undefined> }) {
  const link = (m: string) => {
    const p = new URLSearchParams();
    p.set("mes", m);
    Object.entries(extra).forEach(([k, v]) => v && p.set(k, v));
    return `${basePath}?${p}`;
  };
  return (
    <div className="inline-flex items-center gap-1 rounded-lg border border-stone-200 bg-white p-1">
      <Link href={link(shiftMonth(month, -1))} className="btn-ghost" aria-label="Mês anterior"><ChevronLeft size={16} /></Link>
      <span className="min-w-36 text-center text-sm font-medium">{monthLabel(month)}</span>
      <Link href={link(shiftMonth(month, 1))} className="btn-ghost" aria-label="Próximo mês"><ChevronRight size={16} /></Link>
    </div>
  );
}