// 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, Pressable } 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 (
    <Pressable
      onPress={() => onPress(id)}
      style={({ pressed }) => ({
        width: '100%',
        borderRadius: 18,
        borderWidth: 1,
        borderColor: '#e5e7eb',
        backgroundColor: pressed ? '#f0f9ff' : '#fafafa',
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 18,
        paddingHorizontal: 12,
        gap: 12,
        transform: [{ scale: pressed ? 0.97 : 1 }],
      })}
    >
      <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>
    </Pressable>
  );
}