import React from 'react';
import { Portal } from '../../../common/utils/portal/portal';
import { SwipeablePopup } from '../../../common/components/bottom-sheet/swipeable-popup';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SInfoTitle } from '../../../common/s-components/s-info-title';
import { SInfoParagraph } from '../../../common/s-components/s-info-paragraph';
import { TVendor } from '../../../common/types';
import { POPUP_INFO_ID } from '../../../common/constants';

type TProps = {
  vendor: TVendor;
};

export const InfoTracklist: React.FC<TProps> = props => {
  const { vendor } = props;

  const params = {
    vendor,
  };
  return (
    <>
      <Portal id={POPUP_INFO_ID} updateIfAnyChanged={params}>
        <SwipeablePopup
          pb={45}
          fullheight
          variant={POPUP_INFO_ID}
          content={
            <SBox alignItems="center" px={16} pb={9} pt={5}>
              <SInfoTitle mb={9}>What is a Personalized Tracklist?</SInfoTitle>
              <SInfoParagraph center>
                The playlist below is a sample provided
                {'\n'}by{' '}
                {vendor === 'amazon'
                  ? 'Amazon'
                  : vendor === 'apple'
                  ? 'Apple Music'
                  : 'Spotify'}{' '}
                and not an actual presentation
                {'\n'}of the tracks in this particular playlist.
              </SInfoParagraph>
            </SBox>
          }
        />
      </Portal>
    </>
  );
};