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

interface CategoryItem {
  slug: string;
  name: string;
  icon?: string;
  sortOrder: number;
}

interface CategoryGridProps {
  categories: readonly CategoryItem[];
  columns?: number;
}

export function CategoryGrid({ categories, columns = 3 }: CategoryGridProps) {
  const theme = useTheme();

  return (
    <View style={{ flexDirection: "row", flexWrap: "wrap", gap: theme.spacing.sm }}>
      {categories.map((cat) => {
        const emoji = CATEGORY_EMOJI[cat.slug] ?? cat.icon ?? "📋";
        return (
          <Link key={cat.slug} href={`/(tabs)/(explore)?category=${cat.slug}`} asChild>
            <Pressable
              style={{
                backgroundColor: theme.colors.surface,
                borderRadius: theme.radius.md,
                paddingVertical: theme.spacing.md,
                paddingHorizontal: theme.spacing.sm,
                borderWidth: 1,
                borderColor: theme.colors.border,
                width: `${Math.floor((100 - (columns - 1) * 3.3) / columns)}%` as any,
                alignItems: "center",
                gap: 4,
              }}
            >
              <Text style={{ fontSize: 28 }}>{emoji}</Text>
              <Text
                style={{
                  color: theme.colors.text,
                  fontSize: 12,
                  fontWeight: "500",
                  textAlign: "center",
                }}
              >
                {cat.name}
              </Text>
            </Pressable>
          </Link>
        );
      })}
    </View>
  );
}