wayfarer-weather/components/ui/ChoiceChips.tsx

import { useId } from "react";

export interface Choice<T extends string> {
  value: T;
  label: string;
  note?: string; // small extra text, e.g. "14d"
  disabled?: boolean;
}

/**
 * A row of single-choice chips — used for providers, forecast views, map layers.
 *
 * Each chip is a real radio input, visually hidden; the label is styled from
 * the input's state with Tailwind's `has-*` variants. Arrow keys move between
 * chips for free because they're a native radio group.
 */
export function ChoiceChips<T extends string>({ legend, choices, selected, onChange, size = "md" }: {
  legend: string;
  choices: Choice<T>[];
  selected: T;
  onChange: (value: T) => void;
  size?: "sm" | "md";
}) {
  const name = useId();

  return (
    // min-w-0: fieldsets default to min-content width, which would widen the page on phones
    <fieldset className="m-0 flex min-w-0 gap-2 overflow-x-auto border-0 p-0 pb-1 [scrollbar-width:none]">
      <legend className="sr-only">{legend}</legend>

      {choices.map((choice) => (
        <label
          key={choice.value}
          className={[
            "relative flex flex-none cursor-pointer items-center gap-2 border border-gold-dim bg-panel/60 font-pixel text-xs text-stone transition-colors duration-150",
            size === "md" ? "min-h-[38px] px-3.5" : "min-h-8 px-2.5",
            "hover:not-has-disabled:not-has-checked:border-gold/70 hover:not-has-disabled:not-has-checked:text-ink",
            // Selected: gold border and text, plus a small diamond in front
            "has-checked:border-gold has-checked:bg-gold/12 has-checked:text-gold-bright",
            "has-checked:before:size-1.5 has-checked:before:rotate-45 has-checked:before:bg-gold-bright has-checked:before:content-['']",
            // Keyboard focus lands on the hidden input, so show it on the label
            "has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-teal",
            "has-disabled:cursor-not-allowed has-disabled:opacity-50",
          ].join(" ")}
        >
          <input
            type="radio"
            name={name}
            className="sr-only"
            value={choice.value}
            checked={choice.value === selected}
            disabled={choice.disabled}
            onChange={() => onChange(choice.value)}
          />
          {choice.label}
          {choice.note && <span className="text-teal/90">{choice.note}</span>}
        </label>
      ))}
    </fieldset>
  );
}