'use client'

import { useActionState } from 'react'
import { saveAddress } from '@/app/actions/panel'
import { PROVINCES } from '@/lib/mp-provinces'

export default function AddressForm({ street, number, city, province }: { street: string; number: string; city: string; province: string }) {
  const [state, action, pending] = useActionState(saveAddress, undefined)
  return (
    <form action={action} className="space-y-3">
      <div className="grid grid-cols-[1fr_96px] gap-2">
        <input name="street" defaultValue={street} required className="input" placeholder="Calle" aria-label="Calle" />
        <input name="number" defaultValue={number} className="input" placeholder="Número" aria-label="Número" inputMode="numeric" />
      </div>
      <div className="grid gap-2 sm:grid-cols-2">
        <input name="city" defaultValue={city} required className="input" placeholder="Ciudad" aria-label="Ciudad" />
        <select name="province" defaultValue={province} required className="input" aria-label="Provincia">
          <option value="" disabled>Provincia</option>
          {Object.keys(PROVINCES).map(p => <option key={p} value={p}>{p}</option>)}
        </select>
      </div>
      {state?.error && <p className="text-sm text-red-600">{state.error}</p>}
      {state?.ok && <p className="text-sm text-green-700">{state.ok}</p>}
      <button disabled={pending} className="btn-primary">{pending ? 'Guardando…' : 'Guardar dirección'}</button>
    </form>
  )
}