import React from 'react';
import { TNetworkFailedVariant } from '../../market-selector/types';
import { SFigureMessage } from '../s-components/s-figure-message';
import { Figure } from './figure';

type TProps = {
  variant?: TNetworkFailedVariant;
  verticalOffset: number;
  color?: string;
  withAnimation?: boolean;
};

export const ViewNetworkFailed: React.FC<TProps> = props => {
  const { variant, verticalOffset, color, withAnimation } = props;

  return (
    <Figure
      withAnimation={withAnimation}
      variant={variant}
      verticalOffset={verticalOffset}
      color={color}
      title="Connection is lost"
      renderMessage={() => (
        <SFigureMessage color={color} px={20}>
          Please check your internet connection{'\n'}
          and try again.
        </SFigureMessage>
      )}
      placeholderHeight={230}
      placeholderBottomOffset={24}
    />
  );
};

ViewNetworkFailed.defaultProps = {
  variant: 'network-failed',
  color: 'white',
};