'use client'

import { useActionState } from 'react'
import { stationLogin } from '@/app/actions/station'

export default function PinForm({ stationId, stationName, eventName }: { stationId: string; stationName: string; eventName: string }) {
  const [state, action, pending] = useActionState(stationLogin.bind(null, stationId), undefined)
  return (
    <main className="flex min-h-dvh items-center justify-center bg-ink-950 px-6 text-white">
      <form action={action} className="w-full max-w-xs text-center">
        <p className="text-sm text-gray-500">{eventName}</p>
        <h1 className="mb-8 text-2xl font-bold">{stationName}</h1>
        <input name="pin" type="password" inputMode="numeric" autoFocus required pattern="\d{4,8}" placeholder="PIN"
          className="w-full rounded-control border border-ink-700 bg-ink-900 px-4 py-4 text-center text-3xl tracking-[.5em] outline-none focus:border-brand-400" />
        {state?.error && <p className="mt-3 text-sm text-red-400">{state.error}</p>}
        <button className="btn-brand mt-4 w-full py-4" disabled={pending}>{pending ? 'Verificando…' : 'Entrar'}</button>
      </form>
    </main>
  )
}