import React from 'react';
import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import Button from 'components/items/Button';
import ProjectButton from 'components/items/ProjectButton/ProjectButton';
import SeoHandler from 'components/global/SeoHandler';
import { pushRoute } from 'store/utils/routes';
import styleIdentifiers from './notFound.scss';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type NotFoundProps = StateProps & DispatchProps & OwnProps;

interface NotFoundState {}

const NotFound = (props: SignUpProps) => {
  const { session, lg, history } = props;

  return (
    <div className={styles('NotFound')}>
      <SeoHandler noIndex />
      <div>
        <TextItem path="pages.notFound.title" />
      </div>
      {!session && (
        <ProjectButton
          relative
          rounded
          label="pages.notFound.login"
          action={() => history.push(pushRoute('login', lg))}
        />
      )}
      {session && (
        <ProjectButton
          relative
          rounded
          label="pages.notFound.home"
          action={() => history.push('/')}
        />
      )}
    </div>
  );
};

export default NotFound;
