writer-work-flow/apps/web/components/ui/SegmentedControl.tsx

import type { ReactNode } from "react";

import { cn, focusRing, segmentedClass, transitionUi } from "@/lib/ui/variants";

export interface SegmentOption<T extends string> {
  value: T;
  label: ReactNode;
}

interface SegmentedControlProps<T extends string> {
  options: Array<SegmentOption<T>>;
  value: T;
  onChange: (value: T) => void;
  ariaLabel: string;
  className?: string;
}

export function SegmentedControl<T extends string>({
  options,
  value,
  onChange,
  ariaLabel,
  className,
}: SegmentedControlProps<T>) {
  return (
    <div className={segmentedClass(className)} role="group" aria-label={ariaLabel}>
      {options.map((option) => {
        const selected = option.value === value;
        return (
          <button
            key={option.value}
            type="button"
            aria-pressed={selected}
            onClick={() => onChange(option.value)}
            className={cn(
              "rounded-md px-3 py-1.5 text-sm",
              transitionUi,
              focusRing,
              selected
                ? "bg-panel text-cinnabar shadow-paper"
                : "text-ink-soft hover:text-cinnabar",
            )}
          >
            {option.label}
          </button>
        );
      })}
    </div>
  );
}