import styles from "./Error.module.scss";

import React from "react";
import Image from "next/image";
import Link from "next/link";

import Button from "../../atoms/button";

import errorImage from "../../../public/images/error.png";

interface Props {
  number: string | number;
  text: string;
}

const Error = ({ number, text }: Props) => {
  return (
    <article className={styles.error}>
      <div className="flex justify-center">
        <Image src={errorImage} alt="" />
      </div>

      <div className="error-content">
        <h1 className="error-number">{number}</h1>

        <div className="error-title">{text}</div>
      </div>

      <div className="flex justify-center">
        <Link href="/">
          <Button>Go Home</Button>
        </Link>
      </div>
    </article>
  );
};

export default Error;