import { RefreshCw, TriangleAlert } from 'lucide-react';
import { useRouteError } from 'react-router';
import { Button } from './ui/button';

/** Shown instead of a blank screen if something breaks while drawing a page. */
export function RouteError() {
  const error = useRouteError();
  if (error) console.error(error);
  return (
    <div className="flex min-h-[60dvh] items-center justify-center px-4 py-16">
      <div className="max-w-sm text-center">
        <span className="mx-auto mb-5 flex size-14 items-center justify-center rounded-2xl bg-warn/12 text-warn-fg">
          <TriangleAlert className="size-7" strokeWidth={1.8} />
        </span>
        <h2 className="text-xl font-semibold tracking-tight">Something went wrong</h2>
        <p className="mt-2 text-[14.5px] leading-relaxed text-muted-foreground">
          This screen hit a problem. Reloading usually fixes it, and nothing you saved has been lost.
        </p>
        <Button className="mt-6" onClick={() => window.location.reload()}>
          <RefreshCw /> Reload
        </Button>
      </div>
    </div>
  );
}