"use client";

import { useRef } from "react";
import { Button } from "@/components/ui/button";
import { SendHorizontal } from "lucide-react";
import { postData } from "@/actions/chat.actions";

function ChatInputOrder() {
  const formRef = useRef<HTMLFormElement>(null);

  return (
    <div className="absolute bottom-0 w-full h-24 flex items-center justify-center bg-primary-black px-10">
      <form
        action={async (formData) => {
          await postData(formData);
          formRef.current?.reset();
        }}
        ref={formRef}
        className="w-full flex items-center h-14 border border-white/10 rounded-lg px-2 text-white"
      >
        <input
          type="text"
          name="message"
          placeholder="Type and hit enter..."
          className="w-full focus:outline-none h-full bg-transparent text-white placeholder:text-white/60 px-2"
        />
        <Button type="submit" size={"icon"}>
          <SendHorizontal size={24} />
        </Button>
      </form>
    </div>
  );
}

export { ChatInputOrder };