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

type TProps = {
  verticalOffset?: number;
};

export const ViewNoStreams: React.FC<TProps> = props => {
  const { verticalOffset } = props;

  const getTitle = () => {
    const title = (
      <SFigureTitle pb={11} mt={6}>
        No Streams in Period
      </SFigureTitle>
    );
    return title;
  };

  const getMessage = () => {
    const message = (
      <SFigureMessage>
        No streams available for the selected period. {'\n'}
        Try another date range.
      </SFigureMessage>
    );
    return message;
  };

  return (
    <Figure
      variant="no-tracks-in-chart"
      verticalOffset={verticalOffset}
      renderTitle={getTitle}
      renderMessage={getMessage}
      placeholderHeight={220}
      placeholderBottomOffset={24}
    />
  );
};

ViewNoStreams.defaultProps = {
  verticalOffset: 0,
};