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

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

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