import React from 'react';
import { SBox } from '../s-components/layout/s-box';
import { ShadowBox } from './shadow-box';
import { theme } from '../../app/theme';
import { SErrorBlockText } from '../s-components/s-error-block-text';

type TProps = {
  mr?: number;
  ml?: number;
  mt?: number;
  mb?: number;
  mx?: number;
  message: string | boolean;
  textPadding?: number;
  textTopMargin?: number;
  height?: number;
  showShadow?: boolean;
};

export const ErrorBlock: React.FC<TProps> = props => {
  const {
    message,
    height,
    mr,
    ml,
    textPadding,
    showShadow,
    textTopMargin,
    ...rest
  } = props;

  return (
    <SBox height={height} mr={mr} ml={ml} {...rest}>
      <ShadowBox
        centerContent
        height={height}
        justifyContent="center"
        alignItems="center"
        // flex={1}
        showShadow={showShadow}
        bg={theme.colors.fiord}
        borderRadius={8}
      >
        <SErrorBlockText px={textPadding} mt={textTopMargin}>
          {message}
        </SErrorBlockText>
      </ShadowBox>
    </SBox>
  );
};

ErrorBlock.defaultProps = {
  mr: 16,
  ml: 16,
  textPadding: 0,
  textTopMargin: 0,
  height: 128,
  showShadow: false,
};