import React from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { Figure } from '../../common/components/figure';
import { SH2 } from '../../common/s-components/typography/s-h2';
import { getMarketCodeWithArticle } from '../../common/transducers';
import { TMarket } from '../../common/types';

type TProps = {
  market: TMarket;
};

export const ViewTrackUnavailable: React.FC<TProps> = props => {
  const { market } = props;
  const marketCodeWithArticle = getMarketCodeWithArticle(market, true);

  return (
    <Figure
      addBottomIndents={false}
      variant="not-available-in-market"
      verticalOffset={6}
      renderTitle={() => (
        <SH2 pb={10} mt={6} lineHeight="24px">
          Track Unavailable
        </SH2>
      )}
      renderMessage={() => (
        <SText textAlign="center" px={20} lineHeight="20px">
          This track is not available {'\n'} for&nbsp;
          <SText bold>{marketCodeWithArticle}</SText>. Try changing
          the&nbsp;market in&nbsp;Profile Settings for&nbsp;results.
        </SText>
      )}
      placeholderHeight={220}
      placeholderBottomOffset={24}
    />
  );
};