import { Button } from "@/ui";

export const ErrorPage = () => {
  return (
    <div className='flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8'>
      <div className='max-w-md mx-auto text-center'>
        <div className='w-12 h-12 mx-auto text-primary' />
        <h1 className='mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl'>
          Oops, page not found!
        </h1>
        <p className='mt-4 text-muted-foreground'>
          The page you're looking for doesn't exist or has been moved.
        </p>
        <div className='mt-6'>
          <Button className='inline-flex items-center px-4 py-2 text-sm font-medium transition-colors rounded-md shadow-sm bg-primary text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2'>
            Go to Homepage
          </Button>
        </div>
      </div>
    </div>
  );
};