bw-expo-app/components/bestai/community-grid.tsx

import { memo } from 'react';
import {
  FlatList,
  ListRenderItemInfo,
  Pressable,
  StyleProp,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';
import { Image } from 'expo-image';
import { Ionicons } from '@expo/vector-icons';

export type CommunityItem = {
  id: string;
  title: string;
  image: string;
  chip: string;
  actionLabel: string;
};

type CommunityGridProps = {
  items: CommunityItem[];
  onPressCard?: (item: CommunityItem) => void;
  onPressAction?: (item: CommunityItem) => void;
};

export function CommunityGrid({ items, onPressCard, onPressAction }: CommunityGridProps) {
  const renderItem = ({ item, index }: ListRenderItemInfo<CommunityItem>) => {
    const isLeftColumn = index % 2 === 0;
    return (
      <CommunityCard
        item={item}
        onPressCard={onPressCard}
        onPressAction={onPressAction}
        style={[styles.cardWrapper, isLeftColumn ? styles.cardLeft : styles.cardRight]}
      />
    );
  };

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      numColumns={2}
      scrollEnabled={false}
      columnWrapperStyle={styles.row}
      contentContainerStyle={styles.contentContainer}
    />
  );
}

type CommunityCardProps = {
  item: CommunityItem;
  style?: StyleProp<ViewStyle>;
  onPressCard?: (item: CommunityItem) => void;
  onPressAction?: (item: CommunityItem) => void;
};

const CommunityCard = memo(({ item, style, onPressCard, onPressAction }: CommunityCardProps) => {
  return (
    <Pressable onPress={() => onPressCard?.(item)} style={[styles.card, style]}>
      <View>
        <Image source={{ uri: item.image }} style={styles.cardImage} contentFit="cover" />
        <Chip label={item.chip} />
      </View>
      <Text style={styles.cardTitle}>{item.title}</Text>
      <ActionButton label={item.actionLabel} onPress={() => onPressAction?.(item)} />
    </Pressable>
  );
});
CommunityCard.displayName = 'CommunityCard';

type ChipProps = {
  label: string;
};

const Chip = memo(({ label }: ChipProps) => {
  return (
    <View style={styles.chip}>
      <Ionicons name="people-outline" size={14} color="#E5E9F2" style={styles.chipIcon} />
      <Text style={styles.chipText}>{label}</Text>
    </View>
  );
});
Chip.displayName = 'CommunityChip';

type ActionButtonProps = {
  label: string;
  onPress: () => void;
};

const ActionButton = memo(({ label, onPress }: ActionButtonProps) => {
  return (
    <Pressable onPress={onPress} style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}>
      <Ionicons name="flash-outline" size={16} color="#050505" style={styles.buttonIcon} />
      <Text style={styles.buttonText}>{label}</Text>
    </Pressable>
  );
});
ActionButton.displayName = 'CommunityActionButton';

const styles = StyleSheet.create({
  contentContainer: {
    paddingBottom: 24,
  },
  row: {
    justifyContent: 'space-between',
    marginBottom: 18,
  },
  cardWrapper: {
    flex: 1,
  },
  cardLeft: {
    marginRight: 8,
  },
  cardRight: {
    marginLeft: 8,
  },
  card: {
    backgroundColor: '#101115',
    borderRadius: 20,
    padding: 14,
    borderWidth: 1,
    borderColor: '#1C1D22',
  },
  cardImage: {
    width: '100%',
    height: 148,
    borderRadius: 16,
    marginBottom: 14,
  },
  cardTitle: {
    fontSize: 13,
    letterSpacing: 0.8,
    color: '#F5F8FF',
    marginBottom: 12,
  },
  chip: {
    position: 'absolute',
    top: 12,
    right: 12,
    backgroundColor: 'rgba(5, 5, 5, 0.72)',
    borderRadius: 14,
    paddingHorizontal: 12,
    paddingVertical: 4,
    flexDirection: 'row',
    alignItems: 'center',
  },
  chipIcon: {
    marginRight: 6,
  },
  chipText: {
    color: '#C7FF00',
    fontSize: 11,
    fontWeight: '700',
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 10,
    borderRadius: 14,
    backgroundColor: '#B7FF2F',
  },
  buttonPressed: {
    opacity: 0.9,
  },
  buttonIcon: {
    marginRight: 4,
  },
  buttonText: {
    fontSize: 14,
    fontWeight: '700',
    color: '#050505',
  },
});