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

export interface CompareSubModeToggleProps {
  value: CompareSubMode;
  onChange: (subMode: CompareSubMode) => void;
}

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

  const items: { id: CompareSubMode; labelKey: string }[] = [
    { id: "mom", labelKey: "reports.compare.subModeMoM" },
    { id: "yoy", labelKey: "reports.compare.subModeYoY" },
  ];

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