asios/components/home/IPFilter.tsx

import { Images } from '@/constants/images';
import { IPItem } from '@/services/award';
import React from 'react';
import { ImageBackground, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

// 小程序 item 宽度 174rpx = 87pt, 高度 84rpx = 42pt
const ITEM_WIDTH = 87;
const ITEM_HEIGHT = 42;

interface IPFilterProps {
  data: IPItem[];
  activeIndex: number;
  onSelect?: (item: IPItem, index: number) => void;
}

export function IPFilter({ data, activeIndex, onSelect }: IPFilterProps) {
  return (
    <View style={styles.container}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.content}
      >
        {data.map((item, index) => (
          <TouchableOpacity
            key={item.id || index}
            activeOpacity={0.7}
            onPress={() => onSelect?.(item, index)}
            style={styles.itemWrapper}
          >
            <ImageBackground
              source={{ uri: activeIndex === index ? Images.home.typeBgOn : Images.home.typeBg }}
              style={styles.item}
              resizeMode="cover"
            >
              <Text style={styles.text} numberOfLines={1}>
                {item.name}
              </Text>
            </ImageBackground>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    paddingTop: 10,
  },
  content: {
    paddingHorizontal: 8,
  },
  itemWrapper: {
    marginHorizontal: 8,
  },
  item: {
    width: ITEM_WIDTH,
    height: ITEM_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 3,
  },
  text: {
    fontWeight: 'bold',
    fontSize: 16,
    color: '#fff',
    textShadowColor: '#000',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 1,
  },
});