"use client"

import { View, Text, StyleSheet } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { COLORS, SIZES, SHADOWS } from "../constants/theme"
import Icon from "../../components/Icon"

const OfflineScreen = () => {
  return (
    <SafeAreaView style={styles.container} edges={["top"]}>
      <View style={styles.content}>
        <View style={styles.iconContainer}>
          <Icon type="material" name="wifi-off" size={80} color={COLORS.warning} />
        </View>
        <Text style={styles.title}>Sem conexão com a internet</Text>
        <Text style={styles.message}>
          Verifique sua conexão de rede e tente novamente. O aplicativo requer uma conexão ativa com a internet para
          funcionar corretamente.
        </Text>
        <View style={styles.infoCard}>
          <Icon type="material" name="info" size={20} color={COLORS.primary} style={styles.infoIcon} />
          <Text style={styles.infoText}>
            Você foi desconectado automaticamente. Por favor, faça login novamente quando estiver online.
          </Text>
        </View>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  content: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 24,
  },
  iconContainer: {
    width: 150,
    height: 150,
    borderRadius: 75,
    backgroundColor: "rgba(255, 193, 7, 0.1)",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 32,
  },
  title: {
    fontSize: SIZES.xLarge,
    fontWeight: "bold",
    color: COLORS.text,
    marginBottom: 16,
    textAlign: "center",
  },
  message: {
    fontSize: SIZES.medium,
    color: COLORS.textLight,
    textAlign: "center",
    marginBottom: 32,
    lineHeight: 24,
  },
  infoCard: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "rgba(0, 74, 141, 0.1)",
    borderRadius: 12,
    padding: 16,
    width: "100%",
    ...SHADOWS.small,
  },
  infoIcon: {
    marginRight: 12,
  },
  infoText: {
    flex: 1,
    fontSize: SIZES.font,
    color: COLORS.primary,
    lineHeight: 22,
  },
})

export default OfflineScreen