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

import { Panel } from '../components/ui'

// A mistyped or stale URL rendered a blank page: the router matched the shell, no child route matched,
// and the outlet drew nothing. A blank screen inside a working application reads as a crash rather than
// a wrong address, so it says which it is and offers a way back rather than leaving the browser button
// as the only exit.
export function NotFound() {
  return (
    <Panel className="grid place-items-center py-24 text-center">
      <Compass size={28} style={{ color: 'var(--color-faint)' }} />
      <h2 className="mt-3 text-lg font-extrabold tracking-tight">That page does not exist</h2>
      <p className="mt-1 max-w-md text-sm text-muted">
        The address may be mistyped, or the screen may have moved. Nothing is broken and you are still
        signed in.
      </p>
      <Link
        to="/"
        className="mt-4 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110"
      >
        Back to the Command Center
      </Link>
    </Panel>
  )
}