"use client";

import Button from "@/components/ui/Button/button";
import { useRouter } from "next/navigation";
import React from "react";

import { IoIosArrowRoundBack } from "react-icons/io";

const NotFound = () => {
  const router = useRouter();

  return (
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
        }}>
        <p
          style={{
            fontSize: "15px",
            fontWeight: "300",
            width: "100%",
          }}>
          Error Code 404
        </p>
        <div
          style={{
            fontSize: "50px",
            fontWeight: "bold",
            marginBottom: "20px",
          }}>
          OOOPS! 😥
        </div>
        <p style={{ fontSize: "15px", fontWeight: "200" }}>
          This is not the page you are looking for
        </p>
        <p style={{ fontSize: "15px", fontWeight: "400" }}>
          Maybe you’re lost, let me help you out.
        </p>
        <Button
          onClick={() => {
            router.back();
          }}
          style={{
            marginTop: "20px",
            fontSize: "13px",
            padding: "5px 25px",
            borderRadius: "5px",
            display: "flex",
            alignItems: "center",
            gap: "10px",
            backgroundColor: "#3d3d3d",
            color: "#fff",
          }}>
          <IoIosArrowRoundBack size={20} />
          Back
        </Button>
      </div>
    </div>
  );
};

export default NotFound;
