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

type TProps = {};

export const EmptyStreams: React.FC<TProps> = () => {
  const market = 'All Markets';
  return (
    <SBox
      height={414}
      width={1}
      bg={theme.colors.fiord}
      borderRadius={8}
      justifyContent="center"
    >
      <SBox position="relative" top={-9} left={1}>
        <Placeholder
          variant="no-streams"
          baseWidth={105}
          baseHeight={185}
          marginBottom={0}
        />
      </SBox>
      <SBox mt={2}>
        <SFigureMessage>
          No views available {'\n'}
          for <SText bold>{market}</SText>.
        </SFigureMessage>
      </SBox>
    </SBox>
  );
};