import React from 'react';
import { Figure } from './figure';
import { setFigureOffset } from '../transducers';
import { TVendor } from '../types';
import { SFigureMessage } from '../s-components/s-figure-message';

type TProps = {
  vendor?: TVendor;
  verticalOffset: number;
  androidFigureOffset?: number;
};

export const NoChartForMarket: React.FC<TProps> = props => {
  const { vendor, verticalOffset, androidFigureOffset } = props;
  const vOffset = setFigureOffset(verticalOffset, androidFigureOffset);
  return (
    <Figure
      variant="no-tracks-in-chart"
      verticalOffset={vOffset}
      renderMessage={() => (
        <SFigureMessage px={20}>
          {vendor === 'spotify'
            ? 'Spotify Daily Top 200 '
            : 'Apple Music Top 100 '}
          Chart doesn&apos;t{'\n'}exist in this market.
        </SFigureMessage>
      )}
      placeholderHeight={230}
    />
  );
};