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

const CategoryCard = ({ onPress, title, textStyle, cardStyle }) => {

    const styles = StyleSheet.create({
        cardContainer: {
            height: 164,
            width: 164,
            backgroundColor: colors().secondaryColor,
            borderRadius: moderateScale(8),
            padding: moderateScale(12),
            justifyContent: 'flex-end',

        },
        cardText: {
            fontFamily: fonts.type.semibold,
            alignSelf: 'flex-end',
            color: colors().dominant,
            fontSize: moderateScale(16),
            maxWidth: "80%",
            textAlign: 'right'
        }

    })

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

export default CategoryCard

