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

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

  return (
    <View style={styles.container}>
      <FlatList
        data={MOCK_TICKETS}
        keyExtractor={item => item.id}
        contentContainerStyle={styles.listContent}
        renderItem={({ item }) => (
          <View style={styles.card}>
            <View style={styles.header}>
              <View style={styles.titleWrapper}>
                <Icon
                  name="bug-outline"
                  size={20}
                  color={item.color}
                  style={styles.icon}
                />
                <Text style={styles.title}>{item.ticketId}</Text>
              </View>
            </View>
            <View style={styles.body}>
              <Text style={styles.subject}>{item.subject}</Text>
            </View>
            <View style={styles.footer}>
              <View
                style={[styles.badge, { backgroundColor: `${item.color}15` }]}
              >
                <Text style={[styles.badgeText, { color: item.color }]}>
                  {item.severity}
                </Text>
              </View>
            </View>
          </View>
        )}
      />
    </View>
  );
};