import { isRouteErrorResponse, useRouteError } from 'react-router';

import { Button } from '@/shared/ui/button';

export const RouteError = () => {
  const error = useRouteError();
  const message = toErrorMessage(error);

  return (
    <main className="flex min-h-dvh flex-col items-center justify-center gap-3 px-6 text-center">
      <h1 className="text-2xl font-semibold">문제가 발생했어요</h1>
      <p className="text-sm text-muted-foreground">{message}</p>
      <Button
        variant="outline"
        onClick={() => {
          window.location.reload();
        }}
      >
        새로고침
      </Button>
    </main>
  );
};

const toErrorMessage = (error: unknown): string => {
  if (isRouteErrorResponse(error)) {
    return `${error.status} ${error.statusText}`;
  }
  if (error instanceof Error) {
    return error.message;
  }
  return '알 수 없는 오류가 발생했어요.';
};