// RN-Port der Vue-Card aus apps/rebreak/app/components/urge/UrgeGamePicker.vue
// 2x2-Grid-Kachel mit SVG-Icon (56x56), Titel, descKey und Star-Rating.
import { View, Text, TouchableOpacity } from 'react-native';
import { SvgXml } from 'react-native-svg';
import { useTranslation } from 'react-i18next';
import { GameRatingStars } from './GameRatingStars';
import type { GameType } from '../urge/UrgeGames';

export interface GameCardProps {
  id: GameType;
  svg: string;
  titleKey: string;
  descKey: string;
  avgStars: number;
  count: number;
  onPress: (id: GameType) => void;
}

export function GameCard({
  id,
  svg,
  titleKey,
  descKey,
  avgStars,
  count,
  onPress,
}: GameCardProps) {
  const { t } = useTranslation();
  return (
    <TouchableOpacity
      onPress={() => onPress(id)}
      activeOpacity={0.85}
      style={{ width: '100%' }}
    >
      <View style={{
        borderRadius: 18,
        borderWidth: 1,
        borderColor: '#e5e7eb',
        backgroundColor: '#fafafa',
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 18,
        paddingHorizontal: 12,
        gap: 12,
      }}>
        <SvgXml xml={svg} width={56} height={56} />
        <View style={{ alignItems: 'center', gap: 2 }}>
          <Text
            style={{
              fontFamily: 'Nunito_700Bold',
              color: '#0a0a0a',
              fontSize: 15,
            }}
          >
            {t(titleKey)}
          </Text>
          <Text
            numberOfLines={2}
            style={{
              textAlign: 'center',
              fontFamily: 'Nunito_400Regular',
              color: '#737373',
              fontSize: 11,
              lineHeight: 14,
              minHeight: 28,
              paddingHorizontal: 4,
            }}
          >
            {t(descKey)}
          </Text>
          <View style={{ marginTop: 4 }}>
            <GameRatingStars avg={avgStars} count={count} />
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
}