'use client';

/**
 * Region / currency switcher.
 *
 * ⛔ RENDERS NOTHING on a single-region store, which is almost every store.
 * `regions.length <= 1` returns null before any markup: an empty or
 * one-option dropdown in the header is worse than no switcher at all, and the
 * whole regions feature is meant to be invisible until a merchant actually
 * adds a second region.
 *
 * ⛔ It also renders nothing when the regions call FAILED. A brand-new store
 * is empty and the call can fail (channel not live yet, backend hiccup); the
 * provider swallows that and leaves `regions` at `[]`, which lands in the same
 * early return. There is no error box and no skeleton, because a shopper has
 * no idea what a region is and nothing here is worth interrupting them for.
 *
 * Why a manual switcher exists at all when the edge already guesses: the guess
 * is an IP, and an IP is wrong for travellers, expats, VPNs and anyone behind
 * a corporate egress. The shopper is the authority on where they are, and
 * their choice is stored in a cookie so the SERVER renders the same prices on
 * the next navigation instead of the client re-pricing after hydration.
 *
 * The labels are store data (`region.name`, `region.currency`), not UI copy,
 * so this component needs no translation keys in any locale.
 */

import { useRegion } from '@/core/providers/store-provider';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

export function RegionSwitcher() {
  const { regions, region, setRegion } = useRegion();

  if (regions.length <= 1 || !region) return null;

  return (
    <Select value={region.id} onValueChange={setRegion}>
      <SelectTrigger
        className="h-8 w-auto gap-1 rounded border bg-transparent px-2 py-1 text-sm"
        aria-label="Select region and currency"
      >
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {regions.map((r) => (
          <SelectItem key={r.id} value={r.id}>
            {r.name} ({r.currency})
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}