import * as React from "react";
import { useTranslation } from "react-i18next";
import { Send } from "lucide-react";
import { Button } from "@/components/ui/button";

export function ChatInput({ disabled, onSend }: { disabled?: boolean; onSend: (text: string) => void }) {
  const { t } = useTranslation();
  const [text, setText] = React.useState("");
  return (
    <form
      className="flex items-end gap-2 border-t border-border bg-surface-elevated p-3"
      onSubmit={(event) => {
        event.preventDefault();
        if (!text.trim()) return;
        onSend(text.trim());
        setText("");
      }}
    >
      <textarea
        aria-label={t("sessions.message")}
        className="max-h-32 min-h-10 flex-1 resize-none rounded-md border border-border bg-muted/40 px-3 py-2 text-base outline-none transition placeholder:text-muted-foreground focus:border-primary/70 focus:ring-2 focus:ring-primary/20 sm:text-sm"
        value={text}
        disabled={disabled}
        onChange={(event) => setText(event.target.value)}
        placeholder={disabled ? t("sessions.selectSession") : t("sessions.typeMessage")}
      />
      <Button size="icon" disabled={disabled || !text.trim()} aria-label={t("sessions.sendMessage")}>
        <Send className="h-4 w-4" />
      </Button>
    </form>
  );
}