import { Image, StyleSheet, Text, TouchableOpacity, View, ViewProps } from 'react-native'
import Spacer from './Spacer'
import React from 'react'
import { Utils } from 'tuya-panel-kit'
import res from '../res/index'
import ThemeType from '../config/themeType'

const cx = Utils.RatioUtils.convertX
const { withTheme } = Utils.ThemeUtils

export interface UATabTitleProps extends ViewProps {
  theme?: ThemeType
  text: string
  onIconClick: () => void
}

const UATabTitle = (props: UATabTitleProps) => {
  const styles = StyleSheet.create({
    tabsTitle: {
      color: props.theme?.global.fontColor,
      fontSize: cx(14),
      fontFamily: 'helvetica_neue_lt_std_roman',
    },
  })

  return (
    <View style={[{ flex: 1, flexDirection: 'row', alignItems: 'center' }, props.style]}>
      <Text style={styles.tabsTitle}>{props.text}</Text>
      <Spacer height={cx(0)} width={cx(4)}/>
      <TouchableOpacity onPress={props.onIconClick}>
        <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.icon.primary }} source={res.ic_info}/>
      </TouchableOpacity>
    </View>
  )
}

export default withTheme(UATabTitle)

