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

export function RouteError() {
  const error = useRouteError();

  const message = isRouteErrorResponse(error)
    ? `${error.status} ${error.statusText}`
    : error instanceof Error
      ? error.message
      : 'An unexpected error occurred.';

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100dvh',
        gap: '16px',
        padding: '32px',
        fontFamily: 'sans-serif',
      }}
    >
      <h2 style={{ margin: 0, fontSize: '1.25rem' }}>Something went wrong</h2>
      <p style={{ margin: 0, opacity: 0.7, textAlign: 'center' }}>{message}</p>
      <button
        type="button"
        onClick={() => window.location.reload()}
        style={{
          padding: '8px 20px',
          borderRadius: '8px',
          border: 'none',
          cursor: 'pointer',
          fontWeight: 600,
        }}
      >
        Reload
      </button>
    </div>
  );
}