src/components/ui/SplitToggle.tsx

"use client";

import clsx from "clsx";
import type { Split } from "@/lib/types";
import { splitLabels } from "@/lib/data";

export interface SplitToggleProps {
  value: Split;
  onChange: (split: Split) => void;
  className?: string;
}

const SPLITS: Split[] = ["test", "hard"];

/** Controlled Test/Hard segmented control. */
export default function SplitToggle({
  value,
  onChange,
  className,
}: SplitToggleProps) {
  return (
    <div
      role="group"
      aria-label="Evaluation split"
      className={clsx(
        "hairline inline-flex rounded-sm bg-surface p-0.5",
        className,
      )}
    >
      {SPLITS.map((s) => (
        <button
          key={s}
          type="button"
          aria-pressed={value === s}
          onClick={() => onChange(s)}
          className={clsx(
            "num rounded-[2px] px-3 py-1 text-[12px] tracking-wide transition-colors duration-200 ease-out",
            value === s
              ? "bg-surface-2 text-text"
              : "text-muted hover:text-text",
          )}
        >
          {splitLabels[s]}
        </button>
      ))}
    </div>
  );
}