import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, CheckBox, Alert } from 'react-native';
import { fetchInvoices, markAsPaid } from '../utils/api';

const InvoiceScreen = () => {
  const [invoices, setInvoices] = useState([]);

  useEffect(() => {
    fetchInvoices(setInvoices);
  }, []);

  return (
    <View>
      <FlatList
        data={invoices}
        keyExtractor={(item) => item._id}
        renderItem={({ item }) => (
          <View>
            <Text>{`Invoice Number: ${item.invoiceNumber}`}</Text>
            <Text>{`Due Date: ${item.dueDate}`}</Text>
            <CheckBox
              value={item.paid}
              onValueChange={() => markAsPaid(item._id, setInvoices)}
            />
          </View>
        )}
      />
    </View>
  );
};

export default InvoiceScreen;