import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { Text, View } from 'react-native';

interface BentoFeatureProps {
  icon: keyof typeof Ionicons.glyphMap;
  iconBgClass?: string;
  iconColor?: string;
  label: string;
  value: string;
}

/**
 * Bento 特性卡片 — 小卡片展示关键指标
 * surface-container-lowest 底色，xl 圆角
 */
export function BentoFeature({
  icon,
  iconBgClass = 'bg-blue-50',
  iconColor = '#2563eb',
  label,
  value,
}: BentoFeatureProps) {
  return (
    <View className="flex-1 bg-surface-container-lowest p-5 rounded-2xl justify-between h-36 shadow-sm">
      <View className={`w-10 h-10 rounded-xl items-center justify-center ${iconBgClass}`}>
        <Ionicons name={icon} size={22} color={iconColor} />
      </View>
      <View className="mt-2">
        <Text className="text-xs text-on-surface-variant">{label}</Text>
        <Text className="font-bold text-lg text-on-surface">{value}</Text>
      </View>
    </View>
  );
}