import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { Image } from 'expo-image';
import { X } from 'lucide-react-native';

interface RemovablePhotoTileProps {
    uri: string;
    onRemove: () => void;
    size: number;
}

export default function RemovablePhotoTile({ uri, onRemove, size }: RemovablePhotoTileProps) {
    return (
        <View style={{ width: size, height: size }} className="mb-2">
            <View className="bg-gray-100 rounded-2xl overflow-hidden border border-gray-200" style={{ flex: 1 }}>
                <Image
                    source={{ uri }}
                    style={{ width: '100%', height: '100%' }}
                    contentFit="cover"
                    transition={200}
                />
            </View>
            <TouchableOpacity 
                onPress={onRemove}
                className="absolute top-[-6px] right-[-6px] bg-red-500 rounded-full p-1 border-2 border-white shadow-sm"
                activeOpacity={0.8}
            >
                <X size={14} color="white" strokeWidth={3} />
            </TouchableOpacity>
        </View>
    );
}