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

interface OfflineScreenProps {
  onRetry: () => void;
  isRetrying?: boolean;
}

export default function OfflineScreen({ onRetry, isRetrying = false }: OfflineScreenProps) {
  return (
    <SafeAreaView className="flex-1 bg-white">
      <View className="flex-1 items-center justify-center px-8">
        {/* Icona con cerchio di sfondo */}
        <View className="bg-gray-100 p-6 rounded-full mb-6">
          <WifiOff size={64} className="text-gray-400" />
        </View>

        <Text className="text-2xl font-bold text-gray-800 mb-2 text-center">
          Sei Offline
        </Text>
        
        <Text className="text-base text-gray-500 text-center mb-10 leading-6">
          Sembra che non ci sia connessione a internet.{'\n'}Controlla il Wi-Fi o i dati mobili e riprova.
        </Text>

        {/* Pulsante Riprova */}
        <TouchableOpacity
          onPress={onRetry}
          disabled={isRetrying}
          className={`flex-row items-center justify-center w-full py-4 rounded-xl gap-4 ${
            isRetrying ? 'bg-gray-300' : 'bg-[#099499] active:bg-[#077f83]'
          }`}
        >
          <RefreshCw 
            size={20} 
            color="white" 
            className={`${isRetrying ? 'animate-spin' : ''}`} // TODO: animate-spin richiede config tailwind o gestiscilo manualmente
          />
          <Text className="text-white font-bold text-lg">
            {isRetrying ? 'Controllo...' : 'Riprova'}
          </Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}