import Image from 'next/image'
import React from 'react'
import NumberNotFound from '../icons/NumberNotFound'
import { Button } from '@mui/material'

function NotFoundPage() {
    return (
        <div className='pt-[105px] padding-responsive sm:pt-[135px] md:pt-[165px] lg:pt-[201px] flex flex-col md:flex-row items-center justify-between gap-[50px]'>
            <div className='flex w-full md:w-fit flex-col justify-center items-center'>
                <div className='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=' 
                        flex md:hidden mt-[20px]
                        w-[200px] sm:w-[270px] md:w-[340px] lg:w-[411px]
                        h-[200px] sm:h-[270px] md:h-[340px] lg:h-[405px]
                    '
                    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>
            <Image
                className=' 
                    hidden md:flex
                    w-[200px] sm:w-[270px] md:w-[340px] lg:w-[411px]
                    h-[200px] sm:h-[270px] md:h-[340px] lg:h-[405px]
                '
                src='/assets/images/notfound-cover.png'
                alt='notfound-cover'
                height={405}
                width={411}
            />
        </div>
    )
}

export default NotFoundPage