import { inputStyle } from "../styles/shared.js";
import { PROVINCIAS } from "../constants/provincias.js";

// Paso 3 de la pasarela: provincia, pre-rellenada con lo inferido desde la
// ubicación (si la inferencia falló o no casó con el listado, llega vacía).
export default function PasoProvincia({ form, setForm }) {
  return (
    <div>
      <label htmlFor="paso-provincia" style={{ fontSize: 12, color: "var(--color-text-secondary)", display: "block", marginBottom: 4 }}>
        Provincia <span style={{ color: "#8B0000" }}>*</span>
      </label>
      <select
        id="paso-provincia"
        style={inputStyle}
        value={form.provincia}
        onChange={(e) => setForm((f) => ({ ...f, provincia: e.target.value }))}
      >
        <option value="">Selecciona provincia...</option>
        {PROVINCIAS.map((p) => <option key={p} value={p}>{p}</option>)}
      </select>
      <p style={{ fontSize: 11, color: "var(--color-text-tertiary)", margin: "6px 0 0" }}>
        Si se rellenó automáticamente desde la ubicación, verifica que es correcta.
      </p>
    </div>
  );
}