import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Wrench, ArrowLeft } from "lucide-react";
import { Link } from "wouter";
import { useTranslation } from "react-i18next";

export default function NotFound() {
  const { t } = useTranslation();
  return (
    <div className="min-h-screen w-full flex items-center justify-center bg-background">
      <Card className="w-full max-w-md mx-4">
        <CardContent className="pt-6 pb-6 text-center">
          <Link href="/" className="flex items-center justify-center gap-2 text-primary font-bold text-xl mb-6">
            <Wrench className="w-6 h-6" />
            <span>toolr</span>
          </Link>
          <h1 className="text-6xl font-bold text-muted-foreground/30 mb-2">404</h1>
          <p className="text-muted-foreground mb-6">{t("notFound.text")}</p>
          <Link href="/">
            <Button variant="outline" className="gap-2">
              <ArrowLeft className="w-4 h-4" /> {t("notFound.backHome")}
            </Button>
          </Link>
        </CardContent>
      </Card>
    </div>
  );
}