import { Button } from 'components/common';

export const ErrorFallback = ({ error }: { error?: string }) => {
  return (
    <div
      className="h100vh flex flexColumn alignCenter justifyCenter spacingY4"
      role="alert"
    >
      <div className="fz16">Ooops, something went wrong :( </div>
      {error && (
        <div className="fz14 c-red" style={{ fontFamily: 'monospace' }}>
          {error}
        </div>
      )}
      <Button
        size="l"
        onClick={() => window.location.assign(window.location.origin)}
      >
        Refresh
      </Button>
    </div>
  );
};