import React from 'react'
import { StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
import { Utils } from 'tuya-panel-kit'

const { convertX } =  Utils.RatioUtils

interface Props {
    style?: StyleProp<ViewStyle>
    textStyle?: StyleProp<TextStyle>
    title: string
    rightComponent?: any
    onPress?: any
    disabled?: boolean
}

const LdvItemView: React.FC<Props> = (props) => {
    const { rightComponent, title, style, onPress, disabled, textStyle } = props
    return (
        <TouchableOpacity onPress={onPress} disabled={disabled}>
            <View style={[styles.bg, style]}>
                <Text style={[styles.text, textStyle]}>
                    {title}
                </Text>
                {rightComponent && rightComponent()}
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    bg: {
        height: convertX(50),
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginHorizontal: convertX(24),
    },
    text: {
        fontSize: convertX(16),
        fontWeight: 'bold',
    },
})

export default LdvItemView