import { ConstructionSite } from '@/types/types';
import { Building2 } from 'lucide-react-native';
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';

interface ConstructionSiteCardProps {
    item: ConstructionSite;
    onPress?: () => void;
}

export default function ConstructionSiteCard({ item, onPress }: ConstructionSiteCardProps) {
    return (
        <TouchableOpacity 
            onPress={onPress}
            activeOpacity={0.8}
            className="bg-white rounded-3xl p-5 mb-4 shadow-sm border border-slate-100 flex-row items-center active:scale-[0.98]"
        >
            <View className="bg-primary-50 p-4 rounded-2xl mr-4 shadow-sm">
                <Building2 size={28} color="#1071C2" pointerEvents="none" />
            </View>
            
            <View className="flex-1">
                <Text className="text-lg font-bold text-text uppercase leading-tight">
                    {item.label}
                </Text>
                
                <View className="flex-row items-start pr-2">
                    <Text className="text-sm font-medium text-slate-500 leading-snug">
                        {item.address}
                    </Text>
                </View>

                {item.client && (
                    <Text className="text-xs font-bold text-slate-400 uppercase tracking-wider leading-relaxed">
                        {item.client}
                    </Text>
                )}
            </View>
        </TouchableOpacity>
    );
}