// import { Button } from 'antd';
// import { IconWrapper } from '../../icon-wrapper';
// import { HiArrowLeft } from 'react-icons/hi2';
// import { useNavigate } from 'react-router-dom';
import { useAppModule } from '@pos/base/presentation/hooks';
import Image4040 from '../../../assets/images/404.svg';
import { Button } from 'antd';
import { IconWrapper } from '@pos/base';
import { HiArrowLeft } from 'react-icons/hi';
import { useNavigate } from 'react-router-dom';

export function ForbiddenAccessPage() {
  const moduleAction = useAppModule();
  const webUrl = moduleAction?.webUrl;

  const navigate = useNavigate();

  function handleBack() {
    navigate(`${webUrl}`);
  }

  return (
    <div className="bg-white  ">
      <div className="container min-h-screen px-6 py-12 mx-auto lg:flex lg:items-center lg:gap-12">
        <div className="wf-ull lg:w-1/2">
          <h1 className="mt-3 text-2xl font-semibold text-gray-800  md:text-3xl">Forbidden Access</h1>
          <p className="mt-4 text-gray-500 ">
            Sorry, you do not have access to this page. Here are some helpful links:
          </p>

          <div className="flex items-center mt-6 gap-x-3">
            {webUrl && (
              <Button
                icon={
                  <IconWrapper>
                    <HiArrowLeft />
                  </IconWrapper>
                }
                onClick={() => handleBack()}
                // className="w-[100px]"
              >
                Go to index
              </Button>
            )}
          </div>
        </div>

        <div className="relative w-full mt-12 lg:w-1/2 lg:mt-0">
          <img className="w-full max-w-lg lg:mx-auto" src={Image4040} alt="" />
        </div>
      </div>
    </div>
  );
}