import NumberNotFound from "@/components/icons/NumberNotFound";
import { Button } from "@mui/material";
import Image from "next/image";

function NotfoundDashboard() {
  return (
    <div className="flex flex-col-reverse items-center justify-between gap-[50px]">
      <div className="flex w-full md:w-fit flex-col justify-center items-center">
        <div
          className="flex mt-[72px] md:hidden
                w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px]
                h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]"
        >
          <NumberNotFound />
        </div>
        <Image
          className=" mt-[24px]
                        w-[200px] sm:w-[212px] md:w-[223px] lg:w-[235px]
                        h-[200px] sm:h-[212px] md:h-[223px] lg:h-[235px]
                    "
          src="/assets/images/notfound-cover.png"
          alt="notfound-cover"
          height={405}
          width={411}
        />
        <p className="text-[#3B3B3B] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold mt-[24px] sm:mt-[30px] md:mt-[35px] lg:mt-[40px] mb-[12px] sm:mb-[16px] md:mb-[20px] lg:mb-[24px] text-center">
          صفحه مورد نظر یافت نشد!
        </p>
        <p className="text-[#525252] text-[14px] md:text-[16px] font-normal text-center">
          متاسفانه صفحه ای که به دنبال آن هستید وجود ندارد یا پاک شده است.
        </p>
        <Button
          className="!h-[43px] md:!h-[45px] lg:!h-[46px] !mt-[20px] sm:!mt-[29px] md:!mt-[39px] lg:!mt-[48px] !px-[12px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
          variant="contained"
        >
          بازگشت به صفحه اصلی
        </Button>
      </div>
    </div>
  );
}

export default NotfoundDashboard;