import React from 'react';
import { SText } from '../../../common/s-components/typography/s-text';
import { LINE_BREAK } from '../../../common/constants';
import { SFigureMessage } from '../../../common/s-components/s-figure-message';
import { SMarketContainer } from '../../s-components/s-market-container';
import { MARKET_CARD_WIDTH } from '../../constants';
import { SBox } from '../../../common/s-components/layout/s-box';

type TProps = {
  isCreations: boolean;
  ml: number;
  mr: number;
};

export const EmptyMarker: React.FC<TProps> = props => {
  const { isCreations, ml, mr } = props;
  const value = isCreations ? 'creations' : 'views';
  return (
    <SBox pt={8} pb={16} flex={1}>
      <SMarketContainer
        width={MARKET_CARD_WIDTH}
        borderRadius={8}
        bg="fiord"
        ml={ml}
        mr={mr}
        flex={1}
        minHeight={112}
      >
        <SFigureMessage>
          {`No ${value} available  ${LINE_BREAK} for`}
          <SText bold> Top Markets</SText>.
        </SFigureMessage>
      </SMarketContainer>
    </SBox>
  );
};