import { FormEvent, useState } from 'react'

type Props = {
  onSubmit: (message: string) => void
  busy: boolean
}

export function PromptBar({ onSubmit, busy }: Props) {
  const [text, setText] = useState('')

  const handle = (e: FormEvent) => {
    e.preventDefault()
    if (!text.trim() || busy) return
    onSubmit(text.trim())
    setText('')
  }

  return (
    <form onSubmit={handle} className="glass-strong rounded-2xl p-4 flex gap-3 items-center shadow-card">
      <span className="text-2xl" aria-hidden>💬</span>
      <input
        className="flex-1 bg-white border border-slate-200 rounded-xl px-4 py-2.5 outline-none font-mono text-sm text-ink placeholder:text-ink-faint focus:border-neon-cyan focus:ring-2 focus:ring-neon-cyan/20 transition"
        placeholder="Vraag je agents... bijv. Hoe staat Debezium er voor?"
        value={text}
        onChange={(e) => setText(e.target.value)}
        disabled={busy}
      />
      <button
        type="submit"
        disabled={busy || !text.trim()}
        className="px-5 py-2.5 rounded-xl font-display text-sm font-semibold text-white disabled:opacity-40 transition-all hover:brightness-110"
        style={{
          background: busy ? '#94a3b8' : 'linear-gradient(135deg, #0099cc, #8844cc)',
          boxShadow: busy ? 'none' : '0 4px 16px rgba(0, 153, 204, 0.35)',
        }}
      >
        {busy ? 'Bezig...' : 'Send'}
      </button>
    </form>
  )
}