import React from 'react';
import { TouchableOpacity } from 'react-native';
import { SRow } from '../s-components/layout/s-row';
import { SH2 } from '../s-components/typography/s-h2';
import { SH3 } from '../s-components/typography/s-h3';
import { Icon } from './icon';
import { SInfoTitleArea } from '../s-components/s-info-title-area';

type TProps = {
  title: string;
  onPress?: () => void;
  medium?: boolean;
  position?: string;
  zIndex?: number;
  px?: number;
  mb?: number;
  mt?: number;
  hideIcon?: boolean;
  testID?: string;
};

export const InfoTitle: React.FC<TProps> = props => {
  const { title, onPress, medium, hideIcon, testID, ...rest } = props;

  return (
    <SRow {...rest} alignItems="center">
      {medium ? <SH3 mr={5}>{title}</SH3> : <SH2 mr={5}>{title}</SH2>}
      {!hideIcon ? (
        <TouchableOpacity
          testID={`${testID}-btn`}
          onPress={onPress}
          activeOpacity={0.7}
        >
          <SInfoTitleArea>
            <Icon
              name="info"
              color="wildStrawberry"
              size={22}
              testID="i-icon"
            />
          </SInfoTitleArea>
        </TouchableOpacity>
      ) : null}
    </SRow>
  );
};

InfoTitle.defaultProps = {
  medium: false,
};