"use client"
import { OPTION_LOGIN } from '@/lib/appConstant';
import { getViewSettings } from '@/lib/redux/features/serviceAdmin';
import { useAppSelector } from '@/lib/redux/hooks';
import { useRouter } from 'next/navigation';
import React from 'react';
import AppButton from '../ui/button/app-button';
import useResponsive from '@/hooks/useResponsive';

const NoMatchStyle: any = {
  root: {
    position: 'fixed',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    zIndex: 9999,
    backgroundColor: '#FFFFFF'
  },
  error: {
    fontSize: 180,
    textAlign: 'center'
  }
};

const ErrorPageRender = () => {
  const router = useRouter();
  const { below768 } = useResponsive();
  const viewSettings = useAppSelector(getViewSettings);
  const isOpenType = viewSettings.accountType === OPTION_LOGIN.OPEN_TYPE;

  const goBack = () => {
    router.back();
  };

  return (
    <div
      style={NoMatchStyle.root}
      className="flex flex-column items-center justify-center text-center pb-md-5"
    >
      <div className="pb-5">
        <h1 style={NoMatchStyle.error}>404</h1>
        {
          below768
          ? <div className="d-sm-none">
            <h3>SO SORRY</h3>
            <h3>PAGE NOT FOUND</h3>
          </div>
          : <h3 className="d-none d-sm-block">SO SORRY, PAGE NOT FOUND</h3>
        }
        
        {
          isOpenType
          ? null
          : <AppButton onClick={goBack}>
            Go back
          </AppButton>
        }
      </div>
    </div>
  );
};

export default ErrorPageRender;