"use client";

import { pixelLabel } from "@/lib/styles";
import type { ProviderId, ProviderInfo } from "@/lib/weather/types";
import { ChoiceChips } from "./ui/ChoiceChips";

/**
 * Switcher between active weather data sources.
 * Only configured providers are shown; hidden automatically if only one source is active.
 */
export function ProviderPicker({ providers, selected, onChange }: {
  providers: ProviderInfo[];
  selected: ProviderId;
  onChange: (id: ProviderId) => void;
}) {
  if (providers.length <= 1) return null;

  return (
    <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5">
      <span className={pixelLabel}>Source</span>
      <ChoiceChips
        legend="Weather data source"
        size="sm"
        selected={selected}
        onChange={onChange}
        choices={providers.map((p) => ({
          value: p.id,
          label: p.label,
          note: `${p.forecastDays}d`,
        }))}
      />
    </div>
  );
}