SixFlagsSuperCalendar/components/MonthNav.tsx

"use client";

import { useRouter } from "next/navigation";

interface MonthNavProps {
  currentYear: number;
  currentMonth: number;
}

const MONTH_NAMES = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December",
];

function addMonths(year: number, month: number, delta: number) {
  const d = new Date(year, month - 1 + delta, 1);
  return { year: d.getFullYear(), month: d.getMonth() + 1 };
}

function formatParam(year: number, month: number) {
  return `${year}-${String(month).padStart(2, "0")}`;
}

export function MonthNav({ currentYear, currentMonth }: MonthNavProps) {
  const router = useRouter();

  function navigate(delta: -1 | 1) {
    const { year, month } = addMonths(currentYear, currentMonth, delta);
    router.push(`/?month=${formatParam(year, month)}`);
  }

  const btnStyle = {
    backgroundColor: "var(--color-surface)",
    border: "1px solid var(--color-border)",
    color: "var(--color-text-muted)",
    padding: "4px 12px",
    borderRadius: "6px",
    cursor: "pointer",
    fontSize: "1rem",
  };

  return (
    <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
      <button onClick={() => navigate(-1)} style={btnStyle} aria-label="Previous month">
        ←
      </button>
      <h1 style={{ fontSize: "1.25rem", fontWeight: 600, color: "var(--color-text)", margin: 0 }}>
        {MONTH_NAMES[currentMonth - 1]} {currentYear}
      </h1>
      <button onClick={() => navigate(1)} style={btnStyle} aria-label="Next month">
        →
      </button>
    </div>
  );
}