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

type TProps = {
  keyboardHiddenMargin?: number;
  keyboardDisplayedMargin?: number;
  verticalOffset?: number;
};

export const ViewEmptyRecentSearch: React.FC<TProps> = props => {
  const {
    verticalOffset,
    keyboardHiddenMargin,
    keyboardDisplayedMargin,
  } = props;
  return (
    <Figure
      withAnimation
      variant="empty-search"
      verticalOffset={verticalOffset}
      keyboardHiddenMargin={keyboardHiddenMargin}
      keyboardDisplayedMargin={keyboardDisplayedMargin}
      renderTitle={() => (
        <SFigureMessage semibold>
          Start typing to see {'\n'}search results.
        </SFigureMessage>
      )}
      placeholderHeight={230}
    />
  );
};