managarten/manadeck/apps/mobile/app/(tabs)/explore/index.tsx

import React, { useState } from 'react';
import { View, ScrollView, RefreshControl } from 'react-native';
import { Text } from '~/components/ui/Text';
import { Card } from '~/components/ui/Card';
import { Icon } from '~/components/ui/Icon';
import { useThemeColors } from '~/utils/themeUtils';
import { PageHeader } from '~/components/ui/PageHeader';
import { spacing } from '~/utils/spacing';

export default function ExploreScreen() {
  const [refreshing, setRefreshing] = useState(false);
  const colors = useThemeColors(); // This triggers theme reactivity

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  }, []);

  const categories = [
    { name: 'Sprachen', icon: 'language-outline', color: colors.primary },
    { name: 'Wissenschaft', icon: 'flask-outline', color: colors.secondary },
    { name: 'Mathematik', icon: 'calculator-outline', color: colors.accent },
    { name: 'Geschichte', icon: 'time-outline', color: colors.primary },
    { name: 'Kunst', icon: 'color-palette-outline', color: colors.secondary },
    { name: 'Technologie', icon: 'hardware-chip-outline', color: colors.accent },
  ];

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <ScrollView
        style={{ flex: 1 }}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}>
          <PageHeader title="Entdecken" />

          {/* Content Wrapper */}
          <View style={{ paddingHorizontal: spacing.container.horizontal, paddingTop: spacing.container.top }}>
            {/* Kategorien Card */}
            <Card padding="lg" variant="elevated" style={{ marginBottom: spacing.section }}>
              <Text style={{ marginBottom: spacing.content.title, fontSize: 18, fontWeight: '600', color: colors.foreground }}>Kategorien</Text>
              <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginHorizontal: -4 }}>
                {categories.map((category, index) => (
                  <View key={index} style={{ width: '33.333%', paddingHorizontal: 4, marginBottom: 8 }}>
                    <Card
                      padding="none"
                      variant="elevated"
                      onPress={() => {}}
                      style={{
                        aspectRatio: 1,
                        padding: 12,
                      }}>
                      <View style={{
                        flex: 1,
                        alignItems: 'center',
                        justifyContent: 'center'
                      }}>
                        <View
                          style={{
                            height: 40,
                            width: 40,
                            backgroundColor: category.color,
                            alignItems: 'center',
                            justifyContent: 'center',
                            borderRadius: 20,
                            marginBottom: 8
                          }}>
                          <Icon name={category.icon} size={20} color="white" library="Ionicons" />
                        </View>
                        <Text
                          numberOfLines={1}
                          style={{
                            textAlign: 'center',
                            fontSize: 12,
                            fontWeight: '500',
                            color: colors.foreground,
                            width: '100%'
                          }}>
                          {category.name}
                        </Text>
                      </View>
                    </Card>
                  </View>
                ))}
              </View>
            </Card>

            {/* Beliebte Decks Card */}
            <Card padding="lg" variant="elevated" style={{ marginBottom: spacing.section }}>
              <Text style={{ marginBottom: spacing.content.title, fontSize: 18, fontWeight: '600', color: colors.foreground }}>Beliebte Decks</Text>
              <View style={{ alignItems: 'center', paddingVertical: 32 }}>
                <Icon name="compass-outline" size={48} color={colors.mutedForeground} library="Ionicons" />
                <Text style={{ marginTop: 8, color: colors.mutedForeground }}>Noch keine öffentlichen Decks</Text>
                <Text style={{ marginTop: 4, fontSize: 14, color: colors.mutedForeground }}>
                  Sei der Erste, der ein Deck teilt!
                </Text>
              </View>
            </Card>
          </View>
      </ScrollView>
    </View>
  );
}