'use client';

import Image from 'next/image';
import { cleanImageUrl, getRarityColor, getRarityLabel, type Reward } from '../lib/rewards';

interface RewardCardProps {
  reward: Reward;
  showValue?: boolean;
  className?: string;
}

export default function RewardCard({ reward, showValue = true, className = '' }: RewardCardProps) {
  return (
    <div className={`bg-background/50 rounded-xl p-6 ${className}`}>
      {reward.image && (
        <div className="mb-4">
          <Image 
            src={cleanImageUrl(reward.image)} 
            alt={reward.name}
            width={96}
            height={96}
            className="w-24 h-24 object-contain mx-auto rounded-lg"
            onError={(e) => {
              // Fallback to emoji if image fails to load
              e.currentTarget.style.display = 'none';
              e.currentTarget.nextElementSibling?.classList.remove('hidden');
            }}
          />
          <div className="text-4xl mb-4 hidden">🎯</div>
        </div>
      )}
      <h3 className="text-xl font-semibold mb-2 text-center">{reward.name}</h3>
      <div className="flex items-center justify-center gap-2 mb-4">
        <span className={`px-3 py-1 rounded-full text-xs font-medium ${getRarityColor(reward.price)}`}>
          {getRarityLabel(reward.price)}
        </span>
      </div>
      {showValue && (
        <p className="text-foreground/60 text-sm text-center">
          Value: ${reward.price}
        </p>
      )}
    </div>
  );
}