"use client";

import type { City } from "@transportationer/shared";

interface CitySelectorProps {
  cities: City[];
  selected: string | null;
  onSelect: (slug: string) => void;
}

export function CitySelector({ cities, selected, onSelect }: CitySelectorProps) {
  const ready = cities.filter((c) => c.status === "ready");

  if (ready.length === 0) {
    return (
      <div className="flex items-center gap-3 px-4 py-2 bg-yellow-50 border border-yellow-200 rounded-md text-sm text-yellow-800">
        <span>No cities available.</span>
        <a href="/admin/cities/new" className="underline font-medium">
          Add one in Admin →
        </a>
      </div>
    );
  }

  return (
    <select
      value={selected ?? ""}
      onChange={(e) => onSelect(e.target.value)}
      className="rounded-md border border-gray-300 px-3 py-2 text-sm bg-white focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
    >
      {!selected && <option value="">Select a city…</option>}
      {ready.map((c) => (
        <option key={c.slug} value={c.slug}>
          {c.name}
        </option>
      ))}
    </select>
  );
}