import React from 'react';
import { Placeholder } from '../../common/components/placeholder';
import { SBox } from '../../common/s-components/layout/s-box';
import { SFigureMessage } from '../../common/s-components/s-figure-message';

type TProps = {
  mb?: number;
};

export const StreamsEmpty: React.FC<TProps> = props => {
  const { mb } = props;

  return (
    <SBox mx={16} mb={mb}>
      <SBox
        borderRadius={8}
        bg="fiord"
        height={160}
        alignItems="center"
        pt={25}
      >
        <SBox>
          <Placeholder variant="no-streams" baseWidth={105} baseHeight={188} />
        </SBox>
        <SBox position="relative" top={-9}>
          <SFigureMessage>
            No streams available {'\n'}for the selected period.
          </SFigureMessage>
        </SBox>
      </SBox>
    </SBox>
  );
};

StreamsEmpty.defaultProps = {
  mb: 54,
};