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.colorTip, {backgroundColor: properties.color}]}></View>
            <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
                <Text style={[styles.textSection, {color: textColor}]}>{properties.category}</Text>
            </View>


            <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>

            </View>
        </CustomCard>
    );
};

export default CategoryItem;

const styles = StyleSheet.create({
    colorTip: {
      width: 20,
      borderTopLeftRadius: 20,
      borderBottomLeftRadius: 20,
    },
    textSection: {
      flexDirection: "column",
      alignContent: "space-between",
      alignItems:"flex-start",
      paddingLeft: 10,
      flex:1,
      alignSelf: "stretch",
      paddingVertical: 5
    },
    valueSection: {
      justifyContent:"center",
      borderTopRightRadius: 20,
      borderBottomRightRadius: 20,
    }
  })