import type { ReactNode } from 'react';
import React from 'react';
import type { ViewProps } from 'react-native';
import Icon from '../../Icon';
import {
  ButtonContainer,
  IconWrapper,
  ButtonText,
} from './StyledUtilityButton';
import type { IconName } from '../../Icon';

interface UtilityButtonProps extends ViewProps {
  /**
   * Places an icon within the button, before the button's text
   */
  icon: IconName;
  /**
   * Set the handler to handle press event.
   */
  onPress: () => void;
  /**
   * Button label.
   */
  text: ReactNode;
  /**
   * Visual intent color to apply to button.
   */
  intent?: 'primary' | 'text';
}

const TEXT_INTENTS = {
  primary: 'primary',
  text: 'body',
} as const;

const UtilityButton = ({
  icon,
  onPress,
  text,
  testID,
  intent = 'text',
  style,
  hitSlop,
}: UtilityButtonProps) => (
  <ButtonContainer
    style={style}
    onPress={onPress}
    testID={testID}
    hitSlop={hitSlop}
  >
    <IconWrapper>
      <Icon icon={icon} intent={intent} testID={`${testID}-icon`} />
    </IconWrapper>
    <ButtonText intent={TEXT_INTENTS[intent]}>{text}</ButtonText>
  </ButtonContainer>
);

export default UtilityButton;