import React from 'react';
import { Figure } from './figure';
import { SH4 } from '../s-components/typography/s-h4';
import { setFigureOffset } from '../transducers';

type TProps = {
  variant?: string;
  verticalOffset?: number;
  keyboardHiddenMargin: number;
  keyboardDisplayedMargin: number;
  // withAnimation?: boolean;
};

export const ViewNoSearchResult: React.FC<TProps> = props => {
  const {
    variant,
    verticalOffset,
    keyboardHiddenMargin,
    keyboardDisplayedMargin,
  } = props;
  const vOffset = setFigureOffset(verticalOffset!);

  const figureVariant = variant === 'dark' ? 'no-search' : 'no-search-white';
  return (
    <Figure
      withAnimation
      variant={figureVariant}
      verticalOffset={vOffset}
      keyboardHiddenMargin={keyboardHiddenMargin}
      keyboardDisplayedMargin={keyboardDisplayedMargin}
      renderTitle={() => (
        <SH4 textAlign="center" semibold lineHeight="20px">
          No results to show.{'\n'}Try another filter.
        </SH4>
      )}
      placeholderHeight={224}
    />
  );
};

ViewNoSearchResult.defaultProps = {
  variant: 'light',
  verticalOffset: 0,
  // withAnimation: false,
};