import { Car } from 'lucide-react-native';
import React from 'react';
import { Text, View } from 'react-native';
import { MachineAttendanceItem } from '@/types/types';

interface MachineCardProps {
    item: MachineAttendanceItem;
}

export default function MachineCard({ item }: MachineCardProps) {
    return (
        <View className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100 flex-col mb-4">
            <View className="flex-row items-center border-b border-gray-50 pb-3 mb-3">
                <View className="bg-blue-50 p-4 rounded-full mr-4 flex-shrink-0">
                    <Car size={24} color="#1071C2" pointerEvents="none"/>
                </View>
                <View className="flex-1 mr-2">
                    <Text className="text-base font-bold text-primary-dark mb-1 leading-tight uppercase" numberOfLines={2}>
                        {item.name}
                    </Text>
                    <Text className="text-xs font-medium text-primary-dark mb-1 leading-tight" numberOfLines={2}>
                        {item.description}
                    </Text>
                    <Text className="text-xs font-bold text-gray-400 mt-1">
                        {item.date}
                    </Text>
                </View>
            </View>
            <View className="flex-row items-center flex-wrap gap-x-4 gap-y-3 px-1 justify-start">
                <View className="flex-row items-center">
                    <Text className={`font-bold ${!item.out ? 'text-red-600' : 'text-green-600'}`}>
                        Entrata: {item.in}
                    </Text>
                </View>
                
                {/* The exit is registered automatically at check-in; older records
                    created before that change may still have no exit */}
                {item.out ? (
                    <View className="flex-row items-center">
                        <Text className="font-bold text-green-600">
                            Uscita: {item.out}
                        </Text>
                    </View>
                ) : null}
            </View>
        </View>
    );
}