import { useState } from "react";

export default function SendMessageForm({
  onSend,
  disabled,
}: {
  onSend: (content: string) => Promise<void>;
  disabled?: boolean;
}) {
  const [content, setContent] = useState("");
  const [sending, setSending] = useState(false);

  async function handleSend() {
    const trimmed = content.trim();
    if (!trimmed || sending) return;
    setSending(true);
    try {
      await onSend(trimmed);
      setContent("");
    } finally {
      setSending(false);
    }
  }

  return (
    <div className="flex gap-2 border-t border-slate-800 p-3">
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        disabled={disabled || sending}
        placeholder="Was tust du?"
        rows={2}
        className="flex-1 resize-none rounded bg-slate-800 px-3 py-2 outline-none focus:ring-2 focus:ring-amber-400 disabled:opacity-50"
      />
      <button
        type="button"
        onClick={handleSend}
        disabled={disabled || sending || !content.trim()}
        className="shrink-0 self-end rounded bg-amber-500 px-4 py-2 font-semibold text-slate-950 hover:bg-amber-400 disabled:opacity-50"
      >
        {sending ? "…" : "Senden"}
      </button>
    </div>
  );
}