import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
import React from 'react'
import colors from '../../../theme/colors'
import fonts from '../../../theme/fonts'

const CategoryCard = ({ onPress, title, textStyle, cardStyle }) => {
    return (
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={[cardStyle, styles.cardContainer]}>
                <Text style={[textStyle, styles.cardText]}>{title}</Text>
            </View>
        </TouchableWithoutFeedback>
    )
}

export default CategoryCard

const styles = StyleSheet.create({
    cardContainer: {
        height: 164,
        width: 164,
        backgroundColor: colors.tertiaryColor,
        borderRadius: fonts.getSize(8),
        padding: fonts.getSize(11),
        justifyContent:'flex-end',
        
    },
    cardText: {
        fontFamily: fonts.type.semibold,
        alignSelf: 'flex-end',
        color: colors.white,
        fontSize: fonts.getSize(14),
        maxWidth: "80%",
        textAlign:'right'
    }

})