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

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

export const ViewNoChartTracks: React.FC<TProps> = props => {
  const { market, vendor, verticalOffset, androidFigureOffset } = props;
  const vOffset = setFigureOffset(verticalOffset, androidFigureOffset);
  const chartName =
    vendor === 'spotify' ? 'Top 200 Spotify' : 'Top 100 Apple Music';
  return (
    <Figure
      variant="no-tracks-in-chart"
      fullscreen
      verticalOffset={vOffset}
      renderTitle={() => (
        <SH2 mb={11} lineHeight="24px" mt={10}>
          No Tracks on Chart
        </SH2>
      )}
      renderMessage={() => (
        <SText textAlign="center" lineHeight="20px">
          There are no tracks in {market}
          {'\n'}
          {chartName} Chart.
        </SText>
      )}
      placeholderHeight={220}
    />
  );
};