import React from 'react';
import { useRouteError, isRouteErrorResponse } from 'react-router-dom';
import { Box, Button, config, Text, toRem } from 'folds';

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

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

  return (
    <Box
      direction="Column"
      alignItems="Center"
      justifyContent="Center"
      gap="400"
      style={{ height: '100dvh', padding: config.space.S700 }}
    >
      <Text size="H3">Something went wrong</Text>
      <Text size="T300" priority="300" style={{ textAlign: 'center', maxWidth: toRem(400) }}>
        {message}
      </Text>
      <Button variant="Primary" onClick={() => window.location.reload()}>
        <Text as="span" size="B400">
          Reload
        </Text>
      </Button>
    </Box>
  );
}