import { ColorValue, StyleSheet, Text, View } from "react-native";
import { useTheme } from "../../app/contexts/ThemeContext";
import CustomCard from "../common/CustomCard";

export type CategoryItemProps = {
    category: string,
    color: ColorValue,
    allocated_amount: number,
    total_expenses: number,
    category_guid: string, 
}

const CategoryItem = (properties: CategoryItemProps) => {
  
    const { colors } = useTheme();

    const subText = `${properties.total_expenses} / ${properties.allocated_amount} €`;

    return (
        <CustomCard> 
            <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
            <View style={[styles.textViewStyle]}>
                <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
                  {properties.category}
                </Text>
                <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
                  {subText}
                </Text>
            </View>
        </CustomCard>
    );
};

export default CategoryItem;

const styles = StyleSheet.create({
    colorTipStyle: {
      width: 25,
      borderTopLeftRadius: 10,
      borderBottomLeftRadius: 10,
    },
    textViewStyle: {
      flex: 2,
      flexDirection: "column",
      paddingVertical: 5,
      paddingHorizontal: 10,
      alignSelf: "stretch",
    },
    categoryNameStyle: {
      fontSize: 30,
      fontWeight: "bold",
    },
    subTextStyle: {
      fontSize: 17.5,
    }
  })