import React from 'react';
import type { IconName } from '../Icon';
import Icon from '../Icon';
import { StyledAffixContainer } from './StyledSearch';

export const renderPrefix = ({
  prefix,
}: {
  prefix?: IconName | React.ReactElement;
}) => {
  return typeof prefix === 'string' ? (
    <StyledAffixContainer>
      <Icon intent="text" testID="input-prefix" icon={prefix} size="xsmall" />
    </StyledAffixContainer>
  ) : (
    prefix
  );
};

export const renderSuffix = ({
  suffix,
}: {
  suffix?: IconName | React.ReactElement;
}) => {
  return typeof suffix === 'string' ? (
    <StyledAffixContainer>
      <Icon intent="text" testID="input-suffix" icon={suffix} size="xsmall" />
    </StyledAffixContainer>
  ) : (
    suffix
  );
};