import {Paperclip, Send} from "lucide-react";

type ChatInputProps = {
    className?: string;
    onSearch?: () => void
}

export default function ChatInput(props: ChatInputProps) {
    // todo missing chat send implementation
    return (
        <form className={props.className}>
            <label htmlFor="search"
                   className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
            <div className="relative">
                <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                    <Paperclip className={"w-5 h-5 text-gray-500 dark:text-gray-400"}/>
                </div>
                <input type="search" id="search"
                       className="outline-none block w-full p-4 ps-12 text-sm text-gray-900 border border-gray-300 rounded-b-lg bg-gray-50 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
                       placeholder="Enter message....." required/>

                <button type="submit"
                        className="text-white absolute end-[0.2rem] bottom-[0.3rem] bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg px-4 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                    <Send size={24}/>
                </button>
            </div>
        </form>
    )
}