import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";

export function NotFoundPage() {
  const { t } = useTranslation();

  return (
    <div className="flex min-h-[60vh] flex-col items-center justify-center text-center">
      <p className="text-6xl font-black text-brand-600">404</p>
      <h1 className="mt-4 text-xl font-bold">{t("notFound.title")}</h1>
      <p className="mt-1 text-slate-500 dark:text-slate-400">{t("notFound.description")}</p>
      <Link to="/" className="btn-primary mt-6">
        {t("notFound.backToDashboard")}
      </Link>
    </div>
  );
}
