import { StyleSheet, Text, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import Animated, { FadeInDown } from "react-native-reanimated";
import { GlassCard } from "@/components/glass";
import { colors, typography, spacing, layout } from "@/theme";

export default function ExploreScreen() {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.container, { paddingTop: insets.top + spacing.md }]}>
      <Animated.View entering={FadeInDown.duration(500)}>
        <GlassCard variant="subtle" radius="lg" padding={16}>
          <Text style={typography.title}>Explorer</Text>
          <Text style={[typography.caption, { marginTop: 2 }]}>
            Découvrez la communauté
          </Text>
        </GlassCard>
      </Animated.View>

      <Animated.View
        entering={FadeInDown.delay(200).duration(600)}
        style={styles.placeholder}
      >
        <GlassCard variant="medium" radius="xl" padding={32}>
          <View style={styles.content}>
            <Text style={[typography.heading, { textAlign: "center" }]}>
              Bientôt disponible
            </Text>
            <Text
              style={[
                typography.bodySecondary,
                { textAlign: "center", marginTop: 8 },
              ]}
            >
              Partagez vos créations et découvrez{"\n"}
              celles de la communauté — V1.5
            </Text>
          </View>
        </GlassCard>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
    paddingHorizontal: layout.screenPadding,
  },
  placeholder: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: spacing.md,
  },
  content: {
    alignItems: "center",
  },
});