'use client';

import { useActionState } from 'react';
import { crearReformista } from './actions';

export function CrearReformistaForm() {
  const [error, action, pending] = useActionState(crearReformista, null);
  return (
    <form action={action} className="bg-white border border-gray-200 rounded-xl p-5 grid grid-cols-1 md:grid-cols-2 gap-3">
      <h2 className="md:col-span-2 font-bold text-black">Crear reformista</h2>
      <input name="nombre" placeholder="Nombre" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
      <input name="empresa" placeholder="Empresa" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
      <input name="email" type="email" placeholder="Email" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
      <input name="provincia" placeholder="Provincia" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
      <input name="password" type="password" placeholder="Contraseña (mín. 8)" required className="border border-gray-300 rounded-md px-3 py-2 text-sm" />
      {error && <p className="md:col-span-2 text-sm text-red-600">{error}</p>}
      <button type="submit" disabled={pending} className="md:col-span-2 bg-black text-white rounded-md py-2 font-semibold disabled:opacity-60">
        {pending ? 'Creando…' : 'Crear reformista'}
      </button>
    </form>
  );
}
