import RoundedInput from "@/components/elements/RoundedInput";
import Image from "next/image";

interface TicketInputProps {
  newMessage: string;
  setNewMessage: React.Dispatch<React.SetStateAction<string>>;
  sendMessage: () => void;
  handleImageSelection: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const TicketInput = ({
  newMessage,
  setNewMessage,
  sendMessage,
  handleImageSelection,
}: TicketInputProps) => {
  return (
    <div className="flex items-center w-full p-4 rounded-full max-w-md fixed bottom-24 left-1/2 -translate-x-1/2 px-4 gap-2 bg-primary-light dark:bg-primary-dark">
      <button onClick={sendMessage}>
        <Image
          width={24}
          height={24}
          alt={"verify icon"}
          src={`/images/icons/send-msg.svg`}
          className="dark:invert min-w-[24px] min-h-[24px]"
        />
      </button>

      <input
        type="file"
        accept="image/*"
        id="imageInput"
        onChange={handleImageSelection}
        className="hidden"
      />
      <label htmlFor="imageInput">
        <Image
          width={24}
          height={24}
          alt={"verify icon"}
          src={`/images/icons/select-img.svg`}
          className="dark:invert cursor-pointer min-w-[24px] min-h-[24px]"
        />
      </label>
      <RoundedInput
        value={newMessage}
        onChange={(e) => setNewMessage(e.target.value)}
      />
    </div>
  );
};

export default TicketInput;
