"use client";

import { useRef } from "react";
import { Button } from "@mui/material";
import ProfileP from "@/components/icons/ProfileP";
import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
import { uploadImage } from "@/helper";
import Image from "next/image";

function UploadFile({ image, setImage }) {
  const fileRef = useRef();

  const openInput = () => fileRef.current.click();
  const handleChange = async (event) => {
    const result = await uploadImage(event);
    setImage(result);
  };

  return (
    <>
      <input
        className="contents"
        ref={fileRef}
        type="file"
        onChange={handleChange}
      />
      {image && image.blob ? (
        <Image
          width={24}
          height={24}
          src={image.blob}
          alt="img-uploaded"
          className="w-[74px] h-[74px] rounded-full overflow-hidden object-cover"
        />
      ) : (
        <div
          className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
          onClick={openInput}
        >
          <ProfileP />
        </div>
      )}
      <Button
        variant="text"
        onClick={openInput}
        className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
      >
        انتخاب تصویر
        <ArrowLeftPU />
      </Button>
    </>
  );
}

export default UploadFile;