import React from 'react'
import {
  View,
  Text,
  TouchableOpacity,
  ViewStyle,
  StyleProp,
} from 'react-native'
import { TextStyles } from '../Styles'
import { colors } from '../Colors'
import { InfoModal } from '../components/InfoModal'
import Info from '../icons/Info'

export const TitleWithInfo: React.FC<{
  title: string
  infoModalText?: string
  infoModalTitle?: string
  icon?: React.ReactChild
  style?: StyleProp<ViewStyle>
  centerContent?: React.ReactChild
}> = ({ icon, title, infoModalText, infoModalTitle, style, centerContent }) => {
  return (
    <View
      style={[
        {
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        },
        style,
      ]}
    >
      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
        {icon}
        <Text
          style={[
            TextStyles.bodyHeader,
            {
              color: colors.gray,
              textTransform: 'capitalize',
              marginHorizontal: 8,
            },
          ]}
        >
          {title}
        </Text>
        {centerContent}
      </View>
      {infoModalTitle && infoModalText && (
        <InfoModal
          title={infoModalTitle}
          body={{ type: 'string', text: infoModalText }}
        >
          {(open) => (
            <TouchableOpacity onPress={open} style={{ padding: 12 }}>
              <Info />
            </TouchableOpacity>
          )}
        </InfoModal>
      )}
    </View>
  )
}