import { useTranslation } from "react-i18next";
import type { CompareMode } from "../../hooks/useCompare";

export interface CompareModeTabsProps {
  value: CompareMode;
  onChange: (mode: CompareMode) => void;
}

export default function CompareModeTabs({ value, onChange }: CompareModeTabsProps) {
  const { t } = useTranslation();

  const modes: { id: CompareMode; labelKey: string }[] = [
    { id: "mom", labelKey: "reports.compare.modeMoM" },
    { id: "yoy", labelKey: "reports.compare.modeYoY" },
    { id: "budget", labelKey: "reports.compare.modeBudget" },
  ];

  return (
    <div className="inline-flex gap-1" role="tablist">
      {modes.map(({ id, labelKey }) => (
        <button
          key={id}
          type="button"
          role="tab"
          onClick={() => onChange(id)}
          aria-selected={value === id}
          className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
            value === id
              ? "bg-[var(--primary)] text-white"
              : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
          }`}
        >
          {t(labelKey)}
        </button>
      ))}
    </div>
  );
}