import React from 'react';
import { TVendor } from '../../../common/types';
import { Icon } from '../../../common/components/icon';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SH6 } from '../../../common/s-components/typography/s-h6';

type TProps = {
  vendor: TVendor;
};

export const VendorPlaylistPill: React.FC<TProps> = props => {
  const { vendor } = props;
  const bg =
    vendor === 'spotify'
      ? 'pastelDarkGreen'
      : vendor === 'apple'
      ? 'wildStrawberry'
      : 'dodgerBlue2';
  return (
    <SRow
      width={90}
      height={24}
      px={1}
      pl={7}
      alignItems="center"
      bg={bg}
      borderRadius={2}
    >
      <Icon name={vendor} color="white" size={12} />
      <SH6 mt={-1} ml={5} letterSpacing={1} textTransform="uppercase">
        Playlist
      </SH6>
    </SRow>
  );
};