zhimingge/components/shared/region-select.tsx

"use client";

import { getProvinces, getCities, getRegionLocation } from "@/lib/data/regions";

interface RegionSelectProps {
  provinceCode: string;
  cityCode: string;
  onProvinceChange: (code: string) => void;
  onCityChange: (code: string) => void;
  label?: string;
}

export default function RegionSelect({
  provinceCode,
  cityCode,
  onProvinceChange,
  onCityChange,
  label = "出生地域",
}: RegionSelectProps) {
  const provinces = getProvinces();
  const cities = provinceCode ? getCities(provinceCode) : [];

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium">{label}</label>
      <div className="grid gap-2 sm:grid-cols-2">
        <select
          className="rounded-md border bg-background px-3 py-2 text-sm"
          value={provinceCode}
          onChange={(e) => {
            onProvinceChange(e.target.value);
            onCityChange("");
          }}
        >
          <option value="">选择省份</option>
          {provinces.map((p) => (
            <option key={p.code} value={p.code}>
              {p.name}
            </option>
          ))}
        </select>
        <select
          className="rounded-md border bg-background px-3 py-2 text-sm"
          value={cityCode}
          onChange={(e) => onCityChange(e.target.value)}
          disabled={!provinceCode}
        >
          <option value="">选择城市/区县</option>
          {cities.map((c) => (
            <option key={c.code} value={c.code}>
              {c.name}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

export function useRegionLocation(provinceCode: string, cityCode: string) {
  return provinceCode
    ? getRegionLocation(provinceCode, cityCode)
    : null;
}