import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { CloudDownload } from 'lucide-react-native';

interface UpdateScreenProps {
  onUpdate: () => void;
  isOpeningStore?: boolean;
}

export default function UpdateScreen({ onUpdate, isOpeningStore = false }: UpdateScreenProps) {
  return (
    <SafeAreaView className="flex-1 bg-white">
      <View className="flex-1 items-center justify-center px-8">
        {/* Icon */}
        <View className="bg-gray-100 p-6 rounded-full mb-6">
          <CloudDownload size={64} className="text-[#099499]" pointerEvents="none" />
        </View>

        <Text className="text-2xl font-bold text-gray-800 mb-2 text-center">
          Aggiornamento Richiesto
        </Text>
        
        <Text className="text-base text-gray-500 text-center mb-10 leading-6">
          È disponibile una nuova versione dell'applicazione.{'\n'}Per continuare a utilizzarla è necessario effettuare l'aggiornamento.
        </Text>

        {/* Update Button */}
        <TouchableOpacity
          onPress={onUpdate}
          disabled={isOpeningStore}
          className={`flex-row items-center justify-center w-full py-4 rounded-xl gap-4 ${
            isOpeningStore ? 'bg-gray-300' : 'bg-[#099499] active:bg-[#077f83]'
          }`}
        >
          <Text className="text-white font-bold text-lg">
            {isOpeningStore ? 'Apertura store...' : 'Aggiorna Ora'}
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}