import React from 'react'
import {Image, View, Text, StyleSheet, TouchableOpacity} from 'react-native'

type BirthdaySettingsItemType = {
    title: string
    info: string
    onPress: (title: string) => void
}

function BirthdaySettingsItem(data: BirthdaySettingsItemType) {
    return (
        <TouchableOpacity
            onPress={() => {
                data.onPress(data.title)
            }}>
            <View style={styles.container}>
                <Text style={styles.name}>{data.title}</Text>
                <Text style={styles.birthdayInfo}>{data.info}</Text>
                <Image style={styles.arrowImg} source={require('../../Common/img/right_arrow.png')} />
            </View>
            <View style={styles.separateLine} />
        </TouchableOpacity>
    )
}

export default BirthdaySettingsItem

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: 55,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingHorizontal: 15,
        alignItems: 'center',
        backgroundColor: 'white',
    },
    name: {
        fontSize: 17,
        color: '#191919',
    },
    birthdayInfo: {
        fontSize: 15,
        color: '#aaaaaa',
        marginRight: 10,
    },
    arrowImg: {
        width: 15,
        height: 15,
        resizeMode: 'contain',
        position: 'absolute',
        right: 5,
        tintColor: '#aaaaaa',
    },
    separateLine: {
        position: 'absolute',
        height: 1,
        width: '100%',
        backgroundColor: '#e8e8e8',
        bottom: 0,
    },
})