import { View } from 'react-native';
import { HStack, ProgressBar, Text } from '@cdx-ui/components';

export function MonthlyBudgetSection() {
  return (
    <View className="gap-2 pt-1">
      <HStack className="items-center justify-between">
        <Text className="body-sm text-content-secondary">Monthly budget</Text>
        <Text className="body-sm font-semibold text-content-primary">$1,840 / $2,500</Text>
      </HStack>
      <ProgressBar value={74} max={100} accessibilityLabel="Monthly budget">
        <ProgressBar.Indicator />
      </ProgressBar>
    </View>
  );
}