import React from 'react';
import { View, Text } from 'react-native';
import { CheckCircle2, AlertTriangle, Briefcase, Calendar, MapPin } from 'lucide-react-native';
import { QualityControlItem } from '@/types/types';

interface QualityControlCardProps {
    item: QualityControlItem;
}

export default function QualityControlCard({ item }: QualityControlCardProps) {
    const isSuccess = item.result === 1;

    return (
        <View className="bg-white rounded-3xl p-5 mb-4 shadow-sm border border-gray-100 flex-row items-center gap-4">
            
            {/* Icon Status */}
            <View className={`w-14 h-14 rounded-full items-center justify-center shadow-sm ${isSuccess ? 'bg-green-100 shadow-green-200' : 'bg-red-100 shadow-red-200'}`}>
                {isSuccess ? (
                    <CheckCircle2 size={32} color="#16a34a" pointerEvents="none" />
                ) : (
                    <AlertTriangle size={32} color="#dc2626" pointerEvents="none" />
                )}
            </View>

            {/* Content */}
            <View className="flex-1 justify-center">
                <Text 
                    className="text-lg font-bold text-gray-800 uppercase leading-tight mb-1" 
                    numberOfLines={2} 
                    ellipsizeMode="tail"
                >
                    {item.constructionSite}
                </Text>
                
                <View className="flex-row items-center gap-1 mb-1.5 mt-0.5">
                    <MapPin size={14} color="#6b7280" />
                    <Text 
                        className="text-sm font-medium text-gray-500 leading-snug flex-1" 
                        numberOfLines={1} 
                        ellipsizeMode="tail"
                    >
                        {item.subactivity}
                    </Text>
                </View>

                <View className="flex-row items-center gap-1">
                    <Calendar size={14} color="#9ca3af" />
                    <Text className="text-sm font-semibold text-gray-400">
                        {item.date}
                    </Text>
                </View>
            </View>
        </View>
    );
}