import { Image, StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
import React, { useContext } from 'react'
import { horizontalScale, moderateScale, verticalScale } from '../../../constants/metrics'
import { ThemeContext } from '../../../context/theme.context'
import colors from '../../../constants/colors'
import fonts from '../../../constants/fonts'
import images from '../../../assets/images/images'

const PersonCard = props => {

    const theme = useContext(ThemeContext)
    const currentTheme = theme.state.theme
    const {
        navigation,
        route,
        personName,
        followerCount,
        image,
        onButtonPress,
        buttonText
    } = props

    const styles = StyleSheet.create({
        container:{
            borderRadius: moderateScale(16),
            elevation: 2,
            minWidth: '100%',
            maxWidth: horizontalScale(340),
            backgroundColor: currentTheme === 'light' ? colors().white : colors().black_variant,
            minHeight: verticalScale(70),
            paddingHorizontal: horizontalScale(12),
            paddingVertical: horizontalScale(12),
            flexDirection: 'row',
            justifyContent:'space-between',
            alignItems: 'center'

        },
        details:{
          alignItems:'center',
          justifyContent:'center',
          flexDirection:'row',
          gap: horizontalScale(12)
        },
        
        image:{
          backgroundColor: colors().grayShade_400,
          borderRadius: 64,
          height:64,
          width: 64,
        },
        buttonText:{
          paddingVertical: verticalScale(8),
          paddingHorizontal: horizontalScale(14),
          backgroundColor: colors().primaryColor,
          borderRadius: moderateScale(16),
          color: colors().white,
          fontFamily: fonts.type.semibold
        },
        personName:{
          fontFamily:fonts.type.medium,
          fontSize: moderateScale(16),
          color: colors().primaryColor,
        },
        followerCount:{
          fontFamily: fonts.type.regular,
          color: colors().recessive

        }
    })

    return (
    <View style={styles.container}>
      <View style={styles.details}>
          <View style={styles.imageContainer}>
            <Image source={image ?? images.horizontalCard} style={styles.image} />
          </View>
        <View style={styles.titleContainer}>
          {
            personName ?  
            <Text style={styles.personName}>{personName}</Text> :
            <Text style={styles.emptyPersonName}></Text>

          }
          {
            followerCount ? 
            <Text style={styles.followerCount}>{followerCount} followers</Text> : 
            <Text style={styles.emptyfollowerCount}></Text>
          }
        </View>
      </View>
      <TouchableOpacity contentContainerStyle={styles.button} onPress={onButtonPress}>
        <Text style={styles.buttonText}>{buttonText ?? "Button"}</Text>
      </TouchableOpacity>
    </View>
  )
}

export default PersonCard

