import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React from 'react'
import R from '../../assets/R'

const CardChip = ({
    title,

    marginBottomTitle,

    containerMarginBottom,
    containerMarginHorizontal,
    containerMarginVertical,
    containerMarginRight,
    containerMarginTop,
    containerMarginLeft,

    cardMarginBottom,
    cardMarginHorizontal,
    cardMarginVertical,
    cardMarginRight,
    cardMarginTop,
    cardMarginLeft,
    cardBackgroundColor,
    cardBorderRadius,

    chipMarginBottom,
    chipMarginHorizontal,
    chipMarginVertical,
    chipMarginRight,
    chipMarginTop,
    chipMarginLeft,
    chipBackgroundColor,
    chipBorderRadius,
    chipText,
    chipTextColor,
    chipIcon,

    widthCard,
    heightCard,



    
}) => {
  return (
    <View style={[
        {
            marginHorizontal: containerMarginHorizontal,
            marginVertical: containerMarginVertical,
            marginBottom: containerMarginBottom,
            marginRight: containerMarginRight,
            marginTop: containerMarginTop,
            marginLeft: containerMarginLeft,
        }
    ]} >
      <Text style={{marginBottom: marginBottomTitle}}>{title}</Text>
      <View style={[
        {
            marginHorizontal: cardMarginHorizontal,
            marginVertical: cardMarginVertical,
            marginBottom: cardMarginBottom,
            marginRight: cardMarginRight,
            marginTop: cardMarginTop,
            marginLeft: cardMarginLeft,
            backgroundColor: cardBackgroundColor,
            borderRadius: cardBorderRadius,
            width: widthCard,
            height: heightCard,
        }
    ]}>
        <TouchableOpacity style={[
            {
                marginHorizontal: chipMarginHorizontal,
                marginVertical: chipMarginVertical,
                marginBottom: chipMarginBottom,
                marginRight: chipMarginRight,
                marginTop: chipMarginTop,
                marginLeft: chipMarginLeft,
                backgroundColor: chipBackgroundColor,
                borderRadius: chipBorderRadius,
                
            },
            styles.chip
        ]}>
            <View style={styles.imageIcon}>
            <Image backgroundColor={R.colors.white} resizeMode='cover' source={chipIcon} style={{width: 20, height: 20}}/>
            </View>
            
            <Text style={[{color: chipTextColor}, styles.text]}>{chipText}</Text>
            
        </TouchableOpacity>
    </View>

    </View>
  )
}

export default CardChip

const styles = StyleSheet.create({
    chip: {
        flexDirection:'row',
        alignItems: 'center',
        justifyContent: 'center',
        position:'relative',
        width:250,
        height:40,
        borderRadius: 100,
        top:2,
        left:10
    },
    imageIcon: {
        marginRight:10
    },
    text: {
        fontSize: 12,
        fontFamily:R.fonts.fontRegular
    }
})