import React from 'react';
import { Text, View, FlatList } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { getStyles } from './invoices.styles';
import { MOCK_INVOICES } from '../../mock-data/invoices';
import { useTheme } from '../../theme';

export const InvoicesScreen = () => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  return (
    <View style={styles.container}>
      <FlatList
        data={MOCK_INVOICES}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
        renderItem={({ item }) => (
          <View style={styles.card}>
            <View style={styles.header}>
              <View style={styles.titleWrapper}>
                <Icon
                  name="card-outline"
                  size={20}
                  color={item.color}
                  style={styles.icon}
                />
                <Text style={styles.title}>{item.invoiceNo}</Text>
              </View>
              <Text style={styles.amount}>{item.amount}</Text>
            </View>
            <View style={styles.body}>
              <Text style={styles.client}>Client: {item.client}</Text>
              <Text style={styles.dueDate}>Due Date: {item.dueDate}</Text>
            </View>
            <View style={styles.footer}>
              <View
                style={[styles.badge, { backgroundColor: `${item.color}15` }]}
              >
                <Text style={[styles.badgeText, { color: item.color }]}>
                  {item.status}
                </Text>
              </View>
            </View>
          </View>
        )}
      />
    </View>
  );
};