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

export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
export default function ExpenseItem(itemProps : ExpenseItemProps) {
  const textColor = useThemeColor("primaryText");
  const backgroundColor = useThemeColor("backgroundColor")
  return (
      <CustomCard>
        <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
        <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
          <Text style={{
            fontSize: SIZES.normal,
            color: textColor
          }} numberOfLines={1}>{itemProps.category}</Text>
          <Text style={{
            fontSize: SIZES.large,
            color: textColor
          }} numberOfLines={1}>{itemProps.title}</Text>
          <Text style={{
            fontSize: SIZES.small,
            color: textColor
          }} numberOfLines={1}>{itemProps.date}</Text>
        </View>
        <View style={[styles.valueSection, {backgroundColor: backgroundColor}]}>
          <Text style={{
            fontSize: SIZES.xxLarge,
            color: textColor
          }} numberOfLines={1}>{itemProps.value}</Text>
        </View>
       
      </CustomCard>
     
  )
}

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,
  }
})