"use client";

import type { CSSProperties } from "react";
import { Icon } from "@/ds/icons";

const navButtonStyle: CSSProperties = {
  all: "unset",
  cursor: "pointer",
  width: 32,
  height: 32,
  flexShrink: 0,
  borderRadius: 10,
  display: "grid",
  placeItems: "center",
  color: "var(--seed-color-fg-neutral)",
};

export interface MonthNavProps {
  /** e.g. "2026 оны 8-р сар" (see `monthLabel`). */
  label: string;
  onPrev: () => void;
  onNext: () => void;
  prevLabel?: string;
  nextLabel?: string;
}

/** ‹ [month] › — the month navigator above the Тооцоо list. Ports the
 * `monthRow` control from `TransactionsView.swift` (narrowed to just the
 * month stepper, no week/month panel toggle). */
export function MonthNav({ label, onPrev, onNext, prevLabel = "Өмнөх сар", nextLabel = "Дараагийн сар" }: MonthNavProps) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 4 }}>
      <button type="button" onClick={onPrev} aria-label={prevLabel} style={navButtonStyle}>
        <Icon name="chevron-left" size={16} />
      </button>
      <span style={{ fontSize: 17, fontWeight: 700, minWidth: 150, textAlign: "center" }}>{label}</span>
      <button type="button" onClick={onNext} aria-label={nextLabel} style={navButtonStyle}>
        <Icon name="chevron-right" size={16} />
      </button>
    </div>
  );
}