// ExpensePage.js
import React from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';

const ExpensePage = () => {
  // Data pengeluaran untuk pengelolaan sampah, bisa diganti dengan data dari API atau state global
  const expenses = [
    { id: 1, description: 'Biaya Transportasi Pengangkutan Sampah', amount: 3000000 },
    { id: 2, description: 'Biaya Pemeliharaan TPS', amount: 1200000 },
    { id: 3, description: 'Gaji Petugas Pengelola Sampah', amount: 1500000 },
    { id: 4, description: 'Biaya Pengadaan Alat Pengelolaan Sampah', amount: 800000 },
    { id: 5, description: 'Biaya Sosialisasi Pengelolaan Sampah', amount: 500000 },
  ];

  const totalExpense = expenses.reduce((total, expense) => total + expense.amount, 0);

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.header}>Halaman Pengeluaran Pengelolaan Sampah</Text>
      <View style={styles.expensesList}>
        {expenses.map((expense) => (
          <View key={expense.id} style={styles.expenseItem}>
            <Text style={styles.description}>{expense.description}</Text>
            <Text style={styles.amount}>Rp {expense.amount.toLocaleString()}</Text>
          </View>
        ))}
      </View>
      <View style={styles.totalContainer}>
        <Text style={styles.totalText}>Total Pengeluaran Pengelolaan Sampah:</Text>
        <Text style={styles.totalAmount}>Rp {totalExpense.toLocaleString()}</Text>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f8f8f8',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  expensesList: {
    marginBottom: 20,
  },
  expenseItem: {
    backgroundColor: '#fff',
    padding: 15,
    marginBottom: 10,
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
  },
  description: {
    fontSize: 16,
    fontWeight: '600',
  },
  amount: {
    fontSize: 16,
    color: '#888',
  },
  totalContainer: {
    backgroundColor: '#fff',
    padding: 15,
    borderRadius: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
  },
  totalText: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  totalAmount: {
    fontSize: 18,
    color: '#f00',
    marginTop: 10,
  },
});

export default ExpensePage;