SBU-Hackathon/app/utils/component/ui/ChatInput.tsx

//geminiclone/src/components/ui/ChatInput.tsx
"use client";
import { useState } from "react";
import { Settings, Send, X } from "lucide-react";

interface ChatInputProps {
    onSend: (message: string) => void;
    onOpenSettings: () => void;
}

export default function ChatInput({ onSend, onOpenSettings }: ChatInputProps) {
    const [message, setMessage] = useState("");

    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        setMessage(e.target.value);
    };

    const handleSend = () => {
        if (message.trim()) {
            onSend(message.trim());
            setMessage("");
        }
    };

    const handleKeyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
        if (e.key === "Enter") {
            handleSend();
        }
    };

    const handleClear = () => {
        setMessage("");
    };

    return (
        <div className="fixed  bottom-0 left-0 right-0 flex flex-col max-w-4xl  mx-auto w-full">
            <div
                className={`
                flex items-center border border-black/10 p-3 mx-4   rounded-t-3xl
                bg-white 
                shadow-md transition-all duration-200
        
            `}
            >

                <div className="relative flex-1 mx-2">
                    <textarea
                        className="w-full px-3 py-2 bg-transparent border-none focus:outline-none"
                        placeholder="Type a message..."
                        value={message}
                        onChange={handleChange}
                        onKeyDown={handleKeyPress}
                    />

                    {message && (
                        <button
                            className="absolute right-0 top-1/2 transform -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 "
                            onClick={handleClear}
                            aria-label="Clear input"
                        >
                            <X size={16} />
                        </button>
                    )}
                </div>


                <div className="flex items-center">

                    <button
                        className="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-gray-100 0 mr-1"
                        onClick={onOpenSettings}
                        aria-label="Open settings"
                    >
                        <Settings size={20} />
                    </button>

                    <button
                        className={`
                    p-2 rounded-full transition-all
                    ${message.trim()
                                ? "bg-purple-600 text-white hover:bg-purple-700"
                                : "bg-gray-200 text-gray-400  cursor-not-allowed"
                            }
                `}
                        onClick={handleSend}
                        disabled={!message.trim()}
                        aria-label="Send message"
                    >
                        <Send size={20} />
                    </button>
                </div>
            </div>
        </div>
    );
}