import React from 'react';
import { SText } from '../../common/s-components/typography/s-text';
import { Figure } from '../../common/components/figure';
import { SH2 } from '../../common/s-components/typography/s-h2';

type TProps = {
  emptypageVariant?: 'track' | 'playlist';
};

export const ViewTrackEmpty: React.FC<TProps> = ({ emptypageVariant }) => {
  return (
    <Figure
      addBottomIndents={false}
      variant="load-failed"
      verticalOffset={0}
      renderTitle={() => (
        <SH2 pb={11} mt={4} lineHeight="24px">
          Data Error
        </SH2>
      )}
      renderMessage={() => (
        <SText textAlign="center" px={20} lineHeight="20px">
          This page failed to load {'\n'}
          due to missing{' '}
          {emptypageVariant === 'playlist' ? 'playlist' : 'track'} data.
        </SText>
      )}
      placeholderHeight={220}
      placeholderBottomOffset={25}
    />
  );
};

ViewTrackEmpty.defaultProps = {
  emptypageVariant: 'track',
};