'use client'

import { useActionState } from 'react'
import { addStation } from '@/app/actions/panel'

export default function StationForm({ eventId }: { eventId: string }) {
  const [state, action, pending] = useActionState(addStation.bind(null, eventId), undefined)
  return (
    <form action={action} className="card h-fit space-y-3 p-4">
      <p className="text-sm font-semibold">Agregar barra o caja</p>
      <input name="name" required className="input" placeholder="Barra de tragos" />
      <select name="kind" className="input" defaultValue="bar">
        <option value="bar">Barra (prepara y entrega)</option>
        <option value="cashier">Caja (cobra efectivo)</option>
      </select>
      <input name="routeTags" className="input" defaultValue="bar" placeholder="Qué prepara: bar, comida" />
      <input name="pin" required inputMode="numeric" className="input" placeholder="PIN (4 a 8 números)" />
      {state?.error && <p className="text-sm text-red-600">{state.error}</p>}
      <button className="btn-primary w-full" disabled={pending}>Agregar</button>
    </form>
  )
}