import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { FileText, Trash2 } from 'lucide-react-native';
import { DocumentPickerAsset } from 'expo-document-picker';

interface FileAttachmentCardProps {
    file: DocumentPickerAsset;
    onRemove: () => void;
}

export default function FileAttachmentCard({ file, onRemove }: FileAttachmentCardProps) {
    
    // Format size in readable format if available
    const formatBytes = (bytes?: number) => {
        if (!bytes) return 'Dimensione sconosciuta';
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    };

    return (
        <View className="flex-row items-center bg-white border border-gray-200 rounded-2xl p-4 mb-3 shadow-sm">
            {/* File Icon */}
            <View className="bg-blue-50 p-3 rounded-xl mr-4 border border-blue-100">
                <FileText size={28} color="#1071C2" />
            </View>
            
            {/* File Info */}
            <View className="flex-1 mr-3 justify-center">
                <Text 
                    className="text-gray-800 font-bold text-base mb-1" 
                    numberOfLines={1} 
                    ellipsizeMode="middle"
                >
                    {file.name}
                </Text>
                <Text className="text-gray-400 font-medium text-sm">
                    {formatBytes(file.size)}
                </Text>
            </View>
            
            {/* Remove Button */}
            <TouchableOpacity 
                onPress={onRemove} 
                className="p-3 bg-red-50 border border-red-100 rounded-xl active:bg-red-100"
            >
                <Trash2 size={18} color="#ef4444" />
            </TouchableOpacity>
        </View>
    );
}