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="panel rounded-2xl p-4 flex gap-3 items-center">
      <span className="text-2xl shrink-0" aria-hidden>💬</span>
      <input
        className="prompt-input"
        placeholder="Vraag je agents... bijv. Hoe staat de GPU? Welk model draait er?"
        value={text}
        onChange={(e) => setText(e.target.value)}
        disabled={busy}
      />
      <button type="submit" disabled={busy || !text.trim()} className="btn-primary shrink-0">
        {busy ? 'Bezig...' : 'Send'}
      </button>
    </form>
  )
}
