import Link from 'next/link';
import { FaceFrownIcon } from "@heroicons/react/24/outline";
import { FC } from 'react';

export interface NotFoundPageProps {
    title?:string,
    description?:string,
}

export const NotFoundPage:FC<NotFoundPageProps> = ({ title="404 Not Found", description="Could not find the requested content." }) =>
    <main className="flex h-full flex-col items-center justify-center gap-2">
        <FaceFrownIcon className="w-10 text-gray-400" />
        <h2 className="text-xl font-semibold">{title}</h2>
        <p>{description}</p>
        <Link href="/home" className="mt-4 rounded-md bg-blue-500 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-400">
            Go Back
        </Link>
    </main>