import React from 'react';
import { SRow } from '../../common/s-components/layout/s-row';
import { SBox } from '../../common/s-components/layout/s-box';
import { Placeholder } from '../../common/components/placeholder';
import { TVendor } from '../../common/types';
import { SEmptyChartMessage } from '../s-components/s-empty-chart-message';

type TProps = {
  vendor: TVendor;
};

export const EmptyChart: React.FC<TProps> = props => {
  const { vendor } = props;
  const variant = vendor === 'apple' ? 'no-apple' : 'no-spotify';

  return (
    <SBox
      height={80}
      mb={16}
      bg="fiord"
      borderRadius={8}
      alignItems="center"
      justifyContent="center"
    >
      <SRow>
        <SBox ml={16}>
          <Placeholder
            variant={variant}
            baseWidth={104}
            baseHeight={185}
            marginBottom={0}
          />
        </SBox>
        <SBox ml={16} flex={200} justifyContent="center" mb={3}>
          <SEmptyChartMessage>
            No charts feature{'\n'}this track.
          </SEmptyChartMessage>
        </SBox>
      </SRow>
    </SBox>
  );
};