import { SearchX } from 'lucide-react'
import { Link } from 'react-router-dom'

import { AppShell } from '@/components/layout/AppShell'
import { Button, EmptyState } from '@/components/ui'

export function NotFoundPage() {
  return (
    <AppShell>
      <div className="container-page py-16 lg:py-24">
        <EmptyState
          icon={<SearchX className="size-5" />}
          title="Page not found"
          description="The page you were looking for does not exist, or has moved."
          action={
            <div className="flex flex-wrap justify-center gap-3">
              <Link to="/">
                <Button variant="secondary">Back to home</Button>
              </Link>
              <Link to="/domains">
                <Button>Browse domains</Button>
              </Link>
            </div>
          }
        />
      </div>
    </AppShell>
  )
}
