frontend/src/components/OutputFormatSelector.tsx

import type { OutputFormat } from "../types";

interface OutputFormatSelectorProps {
  value: OutputFormat;
  onChange: (format: OutputFormat) => void;
  disabled?: boolean;
}

const OPTIONS: OutputFormat[] = ["wav", "mp3", "aac"];

export function OutputFormatSelector({
  value,
  onChange,
  disabled,
}: OutputFormatSelectorProps) {
  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between gap-3">
        <span className="text-sm font-medium text-text-secondary">
          Output format
        </span>
        <span className="text-xs text-text-secondary">
          Defaults from the original source when supported
        </span>
      </div>

      <div className="grid grid-cols-3 gap-2">
        {OPTIONS.map((format) => {
          const selected = value === format;

          return (
            <button
              key={format}
              type="button"
              onClick={() => onChange(format)}
              disabled={disabled}
              className={`
                rounded-lg border px-3 py-2 text-sm font-medium uppercase tracking-wide transition-all
                ${
                  selected
                    ? "border-accent bg-accent/10 text-accent"
                    : "border-border text-text-secondary hover:border-text-secondary hover:text-text-primary"
                }
                disabled:opacity-50
              `}
            >
              {format}
            </button>
          );
        })}
      </div>
    </div>
  );
}