the-tip-top-frontend/components/ui/PrizeCard.tsx

'use client';

import React from 'react';
import Image from 'next/image';
import { cn } from '@/utils/helpers';

interface PrizeCardProps {
  imageSrc: string;
  imageAlt: string;
  badge: string;
  title: string;
  description: string;
  isGrandPrix?: boolean;
  className?: string;
}

export const PrizeCard: React.FC<PrizeCardProps> = ({
  imageSrc,
  imageAlt,
  badge,
  title,
  description,
  isGrandPrix = false,
  className,
}) => {
  return (
    <div
      className={cn(
        'bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow overflow-hidden h-full flex flex-col',
        isGrandPrix ? 'border-2 border-[#d4a574]' : 'border border-[#e5e4dc]',
        className
      )}
    >
      <div
        className={cn(
          'aspect-square flex items-center justify-center p-2',
          isGrandPrix
            ? 'bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10'
            : 'bg-gradient-to-br from-[#faf9f5] to-[#f5f5f0]'
        )}
      >
        <Image
          src={imageSrc}
          alt={imageAlt}
          width={400}
          height={400}
          className="w-full h-full object-contain object-center"
        />
      </div>
      <div className="p-6">
        <div
          className={cn(
            'inline-block text-sm font-bold px-3 py-1 rounded-full mb-3',
            isGrandPrix
              ? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-md'
              : 'bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]'
          )}
        >
          {badge}
        </div>
        <h3 className="text-xl font-bold text-[#5a5a4e] mb-2">{title}</h3>
        <p className="text-[#8a8a7a] text-sm mb-4">{description}</p>
      </div>
    </div>
  );
};

export default PrizeCard;