import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { Placeholder } from '../../../common/components/placeholder';
import { TVendor } from '../../../common/types';
import { TOP_PLAYLIST_CARD_HEIGHT } from '../../constants';
import { theme } from '../../../app/theme';
import { SFigureMessage } from '../../../common/s-components/s-figure-message';

type TProps = {
  vendor: TVendor;
};

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

  return (
    <SBox
      borderRadius={8}
      mx={16}
      bg={theme.colors.fiord}
      height={TOP_PLAYLIST_CARD_HEIGHT}
      mb={20}
    >
      <SBox mt={62}>
        <Placeholder
          variant={variant}
          baseWidth={104}
          baseHeight={185}
          marginBottom={12}
        />
      </SBox>
      <SFigureMessage>
        No playlists in the selected market{'\n'}feature this track.
      </SFigureMessage>
    </SBox>
  );
};