/*
 * Copyright (c) 2022 WSO2 LLC. (http://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *http://www.apache.org/licenses/LICENSE-2.
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import Image from 'next/image';
import React from 'react';
import style from '../styles/Error.module.css';

import { useRouter } from 'next/router';
import { Button, Col, Grid, Row } from 'rsuite';
import error500Image from '../public/500.svg';
import { orgSignout } from '../util/util/routerUtil/routerUtil';

export default function Custom500() {
  
  const router = useRouter()
  const goBack = () => orgSignout();

  return (
	<div className={style.errorMainContent}>
	  <Grid>
		<Row>
		  <Col sm={24} md={6} lg={3} />

		  <Col sm={12} md={12} lg={18}>

			<div className={style.errorMainDiv}>

			  <Image src={error500Image} width={500} alt="404 image" />

			  <p style={{
				textAlign: 'center',
				position: 'relative',
				top: -100
			  }}><b>It looks like you have been inactive for a long time.</b> <br />
				When you click on <i>Go back</i>, we will try to recover the session if it exists. <br />
				If you don&apos;t have an active session, you will be redirected to the login page.</p>
			  <Button style={{
				textAlign: 'center',
				position: 'relative',
				top: -100
			  }} size='lg' appearance='ghost' onClick={goBack}>Go Back</Button>

			</div>

		  </Col>

		  <Col sm={24} md={6} lg={3} />

		</Row>
	  </Grid>
	</div>
  )
}
