import React from 'react';
import { View, Text, Modal, TouchableOpacity } from 'react-native';
import { QrCode } from 'lucide-react-native';

interface QrScanModalProps {
    visible: boolean;
    onClose: () => void;
}

export default function QrScanModal({ visible, onClose }: QrScanModalProps) {
    return (
        <Modal
            visible={visible}
            transparent={true}
            animationType="fade"
            statusBarTranslucent
        >
            <View className="flex-1 bg-black/90 items-center justify-center p-4">
                <View className="bg-white rounded-[2rem] p-8 w-full max-w-sm items-center shadow-2xl">
                    <QrCode color="#099499" size={80} />
                    <Text className="text-2xl font-bold mt-6 text-gray-800 text-center">Scansione in corso...</Text>
                    <Text className="text-gray-500 mt-3 text-center text-base px-4">
                        Inquadra il codice QR nel riquadro sottostante
                    </Text>

                    {/* Viewfinder Simulata */}
                    <View className="mt-8 w-64 h-64 border-4 border-[#099499] rounded-3xl bg-gray-50 relative overflow-hidden items-center justify-center">
                        <View className="absolute top-0 w-full h-1 bg-red-500 shadow-[0_0_15px_rgba(239,68,68,0.8)]" />
                        <Text className="text-gray-400 text-sm">Camera Feed</Text>
                    </View>

                    <TouchableOpacity
                        onPress={onClose}
                        className="mt-10 bg-gray-100 rounded-2xl px-10 py-4 w-full active:bg-gray-200"
                    >
                        <Text className="text-gray-800 font-bold text-lg text-center">Annulla</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    );
}