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

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

  const renderItem = ({ item }: { item: any }) => (
    <View style={styles.card}>
      <View style={styles.header}>
        <View style={styles.titleWrapper}>
          <Icon
            name="rocket-outline"
            size={20}
            color={item.color}
            style={styles.icon}
          />
          <Text style={styles.title}>{item.name}</Text>
        </View>
      </View>
      <View style={styles.body}>
        <Text style={styles.lead}>Lead: {item.lead}</Text>
        <View style={styles.progressRow}>
          <Text style={styles.progressLabel}>Progress</Text>
          <Text style={styles.progressValue}>
            {Math.round(item.progress * 100)}%
          </Text>
        </View>
        <View style={styles.progressBarBg}>
          <View
            style={[
              styles.progressBarFill,
              { width: `${item.progress * 100}%`, backgroundColor: item.color },
            ]}
          />
        </View>
      </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>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={MOCK_PROJECTS}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
        renderItem={renderItem}
      />
    </View>
  );
};