// Region hopper shared by the region-scoped pages (insight, observe): a
// controlled select over the fleet's region keys plus the chevron affordance.
// Each page decides where a selection navigates (insight keeps its tab).

import { inputClassName } from "@/components/ui/input";

export function RegionSwitcher(props: {
  regionKeys: string[];
  value: string;
  onSelect: (regionKey: string) => void;
}) {
  const { regionKeys, value, onSelect } = props;
  if (regionKeys.length === 0) return null;
  return (
    <div className="relative">
      <select
        aria-label="Switch region"
        value={value}
        onChange={(e) => onSelect(e.target.value)}
        className={`${inputClassName} w-56 appearance-none py-1 pl-3 pr-8 font-mono text-[13px]`}
        title="Switch to another region"
      >
        {regionKeys.map((key) => (
          <option key={key} value={key}>
            {key}
          </option>
        ))}
      </select>
      <svg
        aria-hidden="true"
        viewBox="0 0 24 24"
        className="pointer-events-none absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-text-muted"
        fill="none"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <polyline points="6 9 12 15 18 9" />
      </svg>
    </div>
  );
}