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

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

export const ViewEmptySearch: React.FC<TProps> = props => {
  const {
    verticalOffset,
    keyboardHiddenMargin,
    keyboardDisplayedMargin,
  } = props;

  return (
    <Figure
      withAnimation
      variant="no-search-white"
      verticalOffset={verticalOffset}
      keyboardHiddenMargin={keyboardHiddenMargin}
      keyboardDisplayedMargin={keyboardDisplayedMargin}
      renderTitle={() => (
        <SFigureMessage semibold>
          No results to show.{'\n'}Try another search.
        </SFigureMessage>
      )}
      placeholderHeight={230}
    />
  );
};

ViewEmptySearch.defaultProps = {
  verticalOffset: 0,
};