import { View, Text, ScrollView } from "react-native";
import { useTheme } from "../../../components/theme";
import { CATEGORIES } from "../../../lib/constants";

export default function ExploreScreen() {
  const theme = useTheme();

  return (
    <ScrollView
      contentInsetAdjustmentBehavior="automatic"
      contentContainerStyle={{ padding: theme.spacing.lg, gap: theme.spacing.md }}
    >
      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: theme.spacing.sm }}>
        {CATEGORIES.map((cat) => (
          <View key={cat.slug} style={{
            backgroundColor: theme.colors.surface,
            borderRadius: theme.radius.md,
            paddingHorizontal: theme.spacing.md,
            paddingVertical: theme.spacing.md,
            borderWidth: 1,
            borderColor: theme.colors.border,
            minWidth: "45%",
            alignItems: "center",
          }}>
            <Text style={{ fontSize: 28, marginBottom: 4 }}>{cat.icon === "construct-outline" ? "🔧" : "📋"}</Text>
            <Text style={{ color: theme.colors.text, fontSize: 14, fontWeight: "500" }}>{cat.name}</Text>
          </View>
        ))}
      </View>
    </ScrollView>
  );
}