'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Car, Home, ArrowLeft } from 'lucide-react';

const NotFound = () => {
	const router = useRouter();
	return (
		<div className="flex flex-col items-center justify-center min-h-[90vh] px-4 text-center">
			<div className="bg-primary/10 p-6 rounded-full mb-6">
				<Car className="w-12 h-12 text-primary animate-bounce" />
			</div>
			<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4">
				404 - Destination Not Found
			</h1>
			<p className="text-lg text-muted-foreground max-w-md mb-8">
				The page you are looking for has been moved or doesn't exist. Allow
				us to redirect you back to safety.
			</p>
			<div className="flex flex-col sm:flex-row gap-4 text-white">
				<Button asChild variant="default" size="lg" className=''>
					<Link href="/">
						<Home className="mr-2 h-4 w-4 " />
						Home
					</Link>
				</Button>
				<Button variant="outline" size="lg" onClick={() => router.back()} className='cursor-pointer'>
					<ArrowLeft className="mr-2 h-4 w-4" />
					Back
				</Button>
			</div>
		</div>
	);
};

export default NotFound;