import React from 'react';
import { Figure } from '../../common/components/figure';
import { SFigureTitle } from '../../common/s-components/s-figure-title';
import { SFigureMessage } from '../../common/s-components/s-figure-message';

type TProps = {
  verticalOffset: number;
};

export const ViewNoNotificationResult: React.FC<TProps> = props => {
  const { verticalOffset } = props;
  return (
    <Figure
      verticalOffset={verticalOffset}
      variant="no-notifications"
      renderTitle={() => (
        <SFigureTitle mb={11} mt={6}>
          You&apos;re all caught up!
        </SFigureTitle>
      )}
      renderMessage={() => (
        <SFigureMessage>
          There are no notifications{'\n'}for your starred tracks, playlists and
          charts.
        </SFigureMessage>
      )}
      placeholderHeight={230}
      placeholderBottomOffset={18}
    />
  );
};