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

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

export type CommunityItem = {
  id: string;
  title: string;
  image: string;
  chip: string;
  actionLabel: string;
  width?: number;
  height?: number;
};

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

const EMPTY_ITEM: CommunityItem = {
  id: 'empty',
  title: '',
  image: '',
  chip: '',
  actionLabel: '',
};

export function CommunityGrid({ items, onPressCard, onPressAction }: CommunityGridProps) {
  const renderItem = ({ item, index }: ListRenderItemInfo<CommunityItem>) => {
    const isEmpty = item.id === 'empty';
    const isLeftColumn = index % 2 === 0;

    return (
      <View style={[styles.cardWrapper, isLeftColumn ? styles.cardLeft : styles.cardRight]}>
        {isEmpty ? (
          <View style={styles.emptyCard} />
        ) : (
          <CommunityCard
            item={item}
            onPressCard={onPressCard}
            onPressAction={onPressAction}
          />
        )}
      </View>
    );
  };

  const data = items.length === 0
    ? [EMPTY_ITEM, EMPTY_ITEM]
    : items.length === 1
    ? [...items, EMPTY_ITEM]
    : items.slice(0, 4);

  return (
    <FlatList
      data={data}
      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) => {
  const aspectRatio = item.width && item.height ? item.width / item.height : 9 / 16;

  return (
    <Pressable onPress={() => onPressCard?.(item)} style={[styles.card, style]}>
      <View style={styles.imageWrapper}>
        <ExpoImage
          source={{ uri: item.image }}
          style={[styles.cardImage, { aspectRatio }]}
          contentFit="cover"
        />
        <LinearGradient
          colors={['rgba(12, 14, 20, 0)', 'rgba(12, 14, 20, 0.85)']}
          style={styles.imageGradient}
        />
        <Chip label={item.chip} />
        <Text style={styles.cardTitle}>{item.title}</Text>
      </View>
      <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}>
      <Text style={styles.chipText}>{label}</Text>
      <Ionicons name="people-outline" size={14} color="#F4F7FF" style={styles.chipIcon} />
    </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]}>
      <RNImage
        source={require('@/assets/icons/start.svg')}
        style={styles.buttonIcon}
        resizeMode="contain"
      />
      <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,
  },
  emptyCard: {
    backgroundColor: 'transparent',
    borderRadius: 20,
  },
  card: {
    backgroundColor: '#2E3031',
    borderRadius: 20,
    padding: 0,
    borderWidth: 1,
    borderColor: '#1B1D24',
  },
  imageWrapper: {
    position: 'relative',
    borderRadius: 16,
    overflow: 'hidden',
    marginBottom: 0,
  },
  cardImage: {
    width: '100%',
    height: undefined,
  },
  imageGradient: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 88,
  },
  cardTitle: {
    position: 'absolute',
    left: 16,
    bottom: 18,
    fontSize: 14,
    letterSpacing: 1,
    fontWeight: '700',
    color: '#F5F8FF',
    textTransform: 'uppercase',
  },
  chip: {
    position: 'absolute',
    top: 14,
    right: 14,
    backgroundColor: 'rgba(27, 43, 78, 0.92)',
    borderRadius: 16,
    paddingHorizontal: 12,
    paddingVertical: 5,
    flexDirection: 'row',
    alignItems: 'center',
  },
  chipIcon: {
    marginLeft: 6,
  },
  chipText: {
    color: '#E4EBFF',
    fontSize: 12,
    fontWeight: '600',
    letterSpacing: 0.5,
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 14,
    borderRadius: 16,
    borderWidth: 0,
  },
  buttonPressed: {
    opacity: 0.85,
  },
  buttonIcon: {
    width: 18,
    height: 18,
    marginRight: 8,
  },
  buttonText: {
    fontSize: 14,
    fontWeight: '700',
    color: '#C7FF00',
  },
});