import { useNavigate } from "react-router-dom"
import { ArrowLeft, ArrowRight, Home } from "lucide-react"

import { Button } from "../components/ui/button"
import { useTranslation } from "../hooks/useTranslation"

export default function NotFound() {
  const navigate = useNavigate()
  const { lang } = useTranslation()
  const isFa = lang === "fa"

  return (
    <main className="flex min-h-screen items-center justify-center bg-[radial-gradient(circle_at_top,#e0f2fe_0%,#f8fafc_42%,#eef2ff_100%)] px-4 text-center text-slate-950 dark:bg-[radial-gradient(circle_at_top,#082f49_0%,#020617_44%,#020617_100%)] dark:text-slate-50">
      <section className="mx-auto max-w-2xl">
        <div className="text-[7rem] font-semibold leading-none tracking-[-0.08em] text-slate-950 sm:text-[10rem] dark:text-white">
          404
        </div>
        <h1 className="mt-5 text-3xl font-semibold tracking-[-0.04em] sm:text-5xl">
          {isFa ? "صفحه پیدا نشد" : "Page not found"}
        </h1>
        <p className="mx-auto mt-5 max-w-xl text-base leading-8 text-slate-600 sm:text-lg dark:text-slate-300">
          {isFa
            ? "این صفحه وجود ندارد یا آدرس آن تغییر کرده است."
            : "This page does not exist or its address has changed."}
        </p>
        <div className="mt-9 flex flex-col justify-center gap-3 sm:flex-row">
          <Button
            type="button"
            variant="outline"
            onClick={() => navigate(-1)}
            className="h-14 rounded-full border-slate-200 bg-white/80 px-7 text-base text-slate-800 backdrop-blur hover:bg-white dark:border-slate-800 dark:bg-slate-950/70 dark:text-slate-100 dark:hover:bg-slate-900"
          >
            {isFa ? <ArrowRight className="me-2 h-4 w-4" /> : <ArrowLeft className="me-2 h-4 w-4" />}
            {isFa ? "بازگشت" : "Go back"}
          </Button>
          <Button
            type="button"
            onClick={() => navigate("/")}
            className="h-14 rounded-full bg-slate-950 px-7 text-base text-white hover:bg-slate-800 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300"
          >
            <Home className="me-2 h-4 w-4" />
            {isFa ? "صفحه اصلی" : "Home page"}
          </Button>
        </div>
      </section>
    </main>
  )
}