import { ArrowUpIcon } from "lucide-react";
import { type SubmitEvent, useState } from "react";
import { Button } from "../ui/button";
import { Textarea } from "../ui/textarea";

interface ChatFormProps {
  onMessage: (message: { text: string }) => void;
  disabled?: boolean;
}

export function ChatForm({ onMessage, disabled }: ChatFormProps) {
  const [text, setText] = useState("");

  function handleSubmit(e: SubmitEvent<HTMLFormElement>) {
    e.preventDefault();
    if (!text.trim()) return;
    setText("");
    onMessage({ text });
  }

  return (
    <form onSubmit={handleSubmit} className="flex gap-2">
      <Textarea
        name="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        className="min-h-18"
      />
      <Button type="submit" disabled={disabled} size="icon-lg">
        <ArrowUpIcon />
      </Button>
    </form>
  );
}