import { ColorValue, StyleSheet, Text, View } from "react-native";
import { useThemeColor } from "../../hooks/useThemeColor";
import CustomCard from "../common/CustomCard";

export type CategoryItemProps = {
    category: string,
    color: ColorValue,
    allocated_account: number, 
}

const CategoryItem = (properties: CategoryItemProps) => {

    const textColor = useThemeColor("primaryText");
    const backgroundColor = useThemeColor("backgroundColor");

    return (
        <CustomCard>
            <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
            <View style={[styles.textViewStyle]}>
                <Text style={[styles.textViewTextStyle, {color: textColor}]}>
                  {properties.category}
                </Text>
            </View>


            <View style={[styles.valueViewStyle]}>
              <Text style={[styles.valueViewTextStyle, {color: textColor}]}>
                10/100$
                {/* {properties.allocated_account} */}
              </Text>
            </View>
        </CustomCard>
    );
};

export default CategoryItem;

const styles = StyleSheet.create({
    colorTipStyle: {
      width: 25,
      borderTopLeftRadius: 10,
      borderBottomLeftRadius: 10,
    },
    textViewStyle: {
      paddingVertical: 5,
      paddingLeft: 10,
      alignSelf: "stretch",
    },
    textViewTextStyle: {
      fontSize: 30,
      fontWeight: "bold",
    },
    valueViewStyle: {
      alignSelf: "stretch",
      flex: 1,
      flexDirection: "row-reverse", 
      alignItems: "center",
      paddingHorizontal: 10,
    },
    valueViewTextStyle: {
      fontSize: 20,
    }
  })