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

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

  return (
    <ScrollView
      contentInsetAdjustmentBehavior="automatic"
      contentContainerStyle={{ padding: theme.spacing.lg, gap: theme.spacing.md, paddingBottom: 40 }}
    >
      <View style={{ marginTop: theme.spacing.md }}>
        <Text style={{ fontSize: 24, fontWeight: "700", color: theme.colors.text }}>
          Добредојдовте 🏠
        </Text>
        <Text style={{ fontSize: 16, color: theme.colors.textSecondary, marginTop: theme.spacing.sm }}>
          Најдете мајстор во вашата близина
        </Text>
      </View>

      <Link href="/(tabs)/(explore)" asChild>
        <Pressable style={{
          backgroundColor: theme.colors.surface,
          borderRadius: theme.radius.md,
          padding: theme.spacing.md,
          borderWidth: 1,
          borderColor: theme.colors.border,
        }}>
          <Text style={{ color: theme.colors.textTertiary, fontSize: 16 }}>🔍 Пребарувај мајстори...</Text>
        </Pressable>
      </Link>

      <Text style={{ fontSize: 18, fontWeight: "600", color: theme.colors.text, marginTop: theme.spacing.sm }}>
        Категории
      </Text>

      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: theme.spacing.sm }}>
        {CATEGORIES.map((cat) => (
          <Link key={cat.slug} href={`/(tabs)/(explore)?category=${cat.slug}`} asChild>
            <Pressable style={{
              backgroundColor: theme.colors.surface,
              borderRadius: theme.radius.md,
              paddingHorizontal: theme.spacing.md,
              paddingVertical: theme.spacing.sm,
              borderWidth: 1,
              borderColor: theme.colors.border,
            }}>
              <Text style={{ color: theme.colors.text, fontSize: 14 }}>{cat.name}</Text>
            </Pressable>
          </Link>
        ))}
      </View>
    </ScrollView>
  );
}