"use client";

import type { Market } from "@/lib/types";
import { getMarkets } from "@/lib/data";
import { CountryFlag } from "@/components/CountryFlag";
import { cn } from "@/lib/utils";

export function MarketSelector({
  selected,
  onToggle
}: {
  selected: Market[];
  onToggle: (market: Market) => void;
}) {
  return (
    <div className="flex flex-wrap gap-2">
      {getMarkets()
        .filter((market) => market.code !== "OTHER")
        .slice(0, 10)
        .map((market) => {
          const active = selected.includes(market.code);
          return (
            <button
              key={market.code}
              type="button"
              onClick={() => onToggle(market.code)}
              className={cn(
                "inline-flex h-9 items-center gap-2 rounded-md border px-2.5 text-xs transition-colors",
                active ? "border-bordeaux-deep bg-bordeaux-deep text-ivory" : "border-gold/30 bg-ivory-warm hover:bg-gold/10"
              )}
            >
              <CountryFlag code={market.code} />
              {market.shortName}
            </button>
          );
        })}
    </div>
  );
}