import React from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { SBox } from '../../common/s-components/layout/s-box';
import { ShadowBox } from '../../common/components/shadow-box';
import { Placeholder } from '../../common/components/placeholder';
import { TEmptyParam } from '../types';

type TProps = TEmptyParam;

export const EmptyMonitoring: React.FC<TProps> = props => {
  const { vendorText, variant } = props;
  const boxHeight = 268;

  return (
    <SBox justifyContent="center" px={16} mt={24} mb={10} height={boxHeight}>
      <ShadowBox
        centerContent
        height={boxHeight}
        justifyContent="center"
        alignItems="center"
        showShadow={false}
        bg="fiord"
        borderRadius={8}
      >
        <SBox mt={79}>
          <Placeholder variant={variant} baseWidth={104} baseHeight={185} />
        </SBox>
        <SBox mt={-9} alignItems="center" flex={10}>
          <SText textAlign="center" lineHeight="20px">
            No {vendorText} streams
            {'\n'}available for the selected period.
          </SText>
        </SBox>
      </ShadowBox>
    </SBox>
  );
};