import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SText } from '../../../common/s-components/typography/s-text';
import { Placeholder } from '../../../common/components/placeholder';

type TProps = {};

export const TracklistEmpty: React.FC<TProps> = () => {
  return (
    <SBox
      height={160}
      bg="fiord"
      mx={16}
      borderRadius={8}
      alignItems="center"
      pt={34}
    >
      <Placeholder
        variant="no-playlists"
        baseWidth={105}
        baseHeight={185}
        marginBottom={13}
      />
      <SText>This playlist doesn’t have any tracks yet.</SText>
    </SBox>
  );
};