import React from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { CARD_WIDTH, CARD_HEIGHT } from '../constants';
import { SCardContainer } from '../s-components/s-card-container';
import { Placeholder } from '../../common/components/placeholder';
import { SBox } from '../../common/s-components/layout/s-box';
import { TMarketName } from '../../market-kpi/types';
import { SFigureMessage } from '../../common/s-components/s-figure-message';
import { getMarketCodeWithArticle } from '../../common/transducers';
import { TMarket } from '../../common/types';

type TProps = {
  marketCode: TMarketName;
  marketFullName: TMarketName;
};

export const CardEmpty: React.FC<TProps> = props => {
  const { marketCode, marketFullName } = props;

  const market = {
    code: marketCode,
    full_name: marketFullName,
  } as TMarket;
  const marketCodeWithArticle = getMarketCodeWithArticle(market, true);

  return (
    <SCardContainer
      borderRadius={8}
      bg="fiord"
      width={CARD_WIDTH}
      height={CARD_HEIGHT}
    >
      <SBox mt={-22} mr={-2}>
        <Placeholder
          variant="no-streams"
          baseWidth={105}
          baseHeight={188}
          marginBottom={12}
        />
        <SFigureMessage>
          No streams available {'\n'} for{' '}
          <SText bold>{marketCodeWithArticle}</SText>.
        </SFigureMessage>
      </SBox>
    </SCardContainer>
  );
};