import { useTranslation } from "react-i18next";
import { Calendar as MonthIcon, CalendarRange as YtdIcon } from "lucide-react";
import type { CartesKpiPeriodMode } from "../../../shared/types";

export interface CartesPeriodModeToggleProps {
  value: CartesKpiPeriodMode;
  onChange: (value: CartesKpiPeriodMode) => void;
}

/**
 * Segmented toggle that flips the four Cartes KPI cards between the reference
 * month (current default) and a Year-to-Date view. The 13-month sparkline and
 * the Seasonality / Top Movers / Budget Adherence widgets are unaffected — they
 * always remain monthly by design. Persistence is owned by the parent hook
 * (`useCartes`); this component is a controlled input only.
 */
export default function CartesPeriodModeToggle({
  value,
  onChange,
}: CartesPeriodModeToggleProps) {
  const { t } = useTranslation();

  const options: { type: CartesKpiPeriodMode; icon: React.ReactNode; label: string }[] = [
    {
      type: "month",
      icon: <MonthIcon size={14} />,
      label: t("reports.cartes.periodMode.month"),
    },
    {
      type: "ytd",
      icon: <YtdIcon size={14} />,
      label: t("reports.cartes.periodMode.ytd"),
    },
  ];

  return (
    <div
      className="inline-flex gap-1"
      role="group"
      aria-label={t("reports.cartes.periodMode.aria")}
    >
      {options.map(({ type, icon, label }) => (
        <button
          key={type}
          type="button"
          onClick={() => onChange(type)}
          aria-pressed={value === type}
          className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
            value === type
              ? "bg-[var(--primary)] text-white"
              : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
          }`}
        >
          {icon}
          {label}
        </button>
      ))}
    </div>
  );
}
