import React from "react";
import Container from "components/Container";
import { Button } from "components/Button/Button";
import Link from "components/typography/Link";

import Lottie from "react-lottie";
import animationData from "../../assets/lotties/notFoundAnimation.json";

const NotFound = () => {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
    <Container
      variant="straight"
      className="flex flex-col items-center justify-center 
      font-serif h-screen my-auto
      "
    >
      <Lottie options={defaultOptions} height={200} width={200} />
      <span className="font-bold text-5xl ">404</span>
      <h3 className="font-bold text-2xl text-center">Page does not exist</h3>
      <h4 className="text-center">
        Maybe you got a broken link, or maybe you made a misprint in the address
        bar
      </h4>
      <Button className="my-4">
        <Link to="/">Go to home</Link>
      </Button>
    </Container>
  );
};

export default NotFound;