frontend/src/components/chat/ChatInputArea.tsx

import React, { RefObject } from "react";
import { CornerDownLeft } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

interface ChatInputAreaProps {
  inputRef: RefObject<HTMLInputElement>;
  inputValue: string;
  setInputValue: (value: string) => void;
  handleSendMessage: (e?: React.FormEvent) => void;
  isLoading: boolean;
}

export const ChatInputArea: React.FC<ChatInputAreaProps> = ({
  inputRef,
  inputValue,
  setInputValue,
  handleSendMessage,
  isLoading
}) => {
  return (
    <div className="absolute bottom-0 left-0 right-0 p-4 bg-background/80 dark:bg-background/50 backdrop-blur-md border-t border-border/30">
      <div className="max-w-3xl mx-auto">
        <form onSubmit={handleSendMessage} className="relative">
          <div className="relative">
            <Input
              ref={inputRef}
              type="text"
              placeholder="Message Insight AI..."
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              className="pr-20 py-6 text-base bg-background/50 border border-border/50 focus-visible:ring-1 focus-visible:ring-primary/50 rounded-xl"
              disabled={isLoading}
            />

            <div className="absolute right-2 top-1/2 -translate-y-1/2">
              <Button
                type="submit"
                size="icon"
                className="rounded-lg"
                disabled={isLoading || !inputValue.trim()}
              >
                {isLoading ? (
                  <div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
                ) : (
                  <CornerDownLeft className="h-4 w-4" />
                )}
              </Button>
            </div>
          </div>

          <div className="mt-2 text-center text-xs text-muted-foreground">
            Insight AI may produce inaccurate information. Verify important information.
          </div>
        </form>
      </div>
    </div>
  );
};