import React, {ReactNode} from 'react';
import {StyleProp, StyleSheet, ViewStyle} from 'react-native';
import {CustomPressable} from '../Button';
import {Colors, fontSz, globalStyles, Images, ms} from '../../utils';
import {Text} from '../Text';
import {SmartImage} from '../Images/SmartImage';

type Props = {
  text: string | ReactNode;
  containerStyle?: StyleProp<ViewStyle>;
};

export const Info = (props: Props) => {
  const {containerStyle, text} = props;
  return (
    <CustomPressable
      activeOpacity={0.95}
      style={[
        globalStyles.rowStart,
        {
          columnGap: ms(10),
          borderRadius: ms(24),
          paddingHorizontal: ms(10),
          paddingVertical: ms(8),
          backgroundColor: Colors.alertYellow,
        },
        containerStyle,
      ]}>
      <SmartImage
        source={Images.info}
        style={{
          width: ms(25),
          height: ms(25),
        }}
      />
      {typeof text === 'string' ? (
        <Text
          fontSize={fontSz(12)}
          fontFamily="Gordita-Regular"
          fontWeight="400"
          text={`${text}`}
          color={Colors.neutral30}
          style={{flex: 1}}
        />
      ) : (
        text
      )}
    </CustomPressable>
  );
};

const styles = StyleSheet.create({});