import React from 'react';
import { theme } from '../../../app/theme';
import { Placeholder } from '../../../common/components/placeholder';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SEmptyMessage } from '../../s-components/s-empty-message';

type TProps = {};

export const Empty: React.FC<TProps> = () => {
  return (
    <SBox
      alignItems="center"
      bg={theme.colors.fiord}
      borderRadius={8}
      height={160}
      px={16}
      pt={34}
    >
      <Placeholder
        variant="no-playlists"
        baseWidth={104}
        baseHeight={185}
        marginBottom={11}
      />
      <SBox mt={0}>
        <SEmptyMessage>
          This playlist doesn’t have any tracks yet.
        </SEmptyMessage>
      </SBox>
    </SBox>
  );
};