frontend/src/components/business/VotePreview.tsx

/**
 * VotePreview 投票预览组件
 * 用于帖子列表中显示投票预览，类似微博风格
 */

import React, { useMemo } from 'react';
import {
  View,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { spacing, fontSizes, borderRadius, useAppColors, type AppColors } from '../../theme';
import Text from '../common/Text';

interface VotePreviewProps {
  totalVotes?: number;
  optionsCount?: number;
  onPress?: () => void;
}

function createVotePreviewStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.primary.light + '08',
      borderRadius: borderRadius.md,
      padding: spacing.md,
      marginTop: spacing.sm,
      borderWidth: 1,
      borderColor: colors.primary.light + '30',
    },
    iconContainer: {
      width: 36,
      height: 36,
      borderRadius: borderRadius.md,
      backgroundColor: colors.primary.light + '20',
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: spacing.sm,
    },
    content: {
      flex: 1,
    },
    title: {
      fontSize: fontSizes.md,
      fontWeight: '600',
      color: colors.text.primary,
      marginBottom: 2,
    },
    subtitle: {
      fontSize: fontSizes.sm,
      color: colors.text.secondary,
    },
  });
}

const VotePreview: React.FC<VotePreviewProps> = ({
  totalVotes = 0,
  optionsCount = 0,
  onPress,
}) => {
  const colors = useAppColors();
  const styles = useMemo(() => createVotePreviewStyles(colors), [colors]);

  // 格式化票数
  const formatVoteCount = (count: number): string => {
    if (count >= 10000) {
      return (count / 10000).toFixed(1) + '万';
    }
    if (count >= 1000) {
      return (count / 1000).toFixed(1) + 'k';
    }
    return count.toString();
  };

  // 判断是否有真实数据
  const hasData = totalVotes > 0 || optionsCount > 0;

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={onPress}
      activeOpacity={0.8}
    >
      <View style={styles.iconContainer}>
        <MaterialCommunityIcons
          name="vote"
          size={18}
          color={colors.primary.main}
        />
      </View>
      <View style={styles.content}>
        <Text style={styles.title}>
          正在进行投票
        </Text>
        <Text style={styles.subtitle}>
          {hasData 
            ? `${optionsCount} 个选项 · ${formatVoteCount(totalVotes)} 人参与`
            : '点击查看详情'
          }
        </Text>
      </View>
      <MaterialCommunityIcons
        name="chevron-right"
        size={20}
        color={colors.text.hint}
      />
    </TouchableOpacity>
  );
};

export default VotePreview;