"use client";

import { useRef } from "react";
import { Button } from "@mui/material";
import ProfileP from "@/components/icons/ProfileP";
import ArrowLeftPU from "@/components/icons/ArrowLeftPU";

function UploadFile() {
  const fileRef = useRef();

  const openInput = () => fileRef.current.click();

  return (
    <>
      <input className="contents" ref={fileRef} type="file" />
      <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;