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-primary-500' : 'border border-beige-300',
        className
      )}
    >
      <div
        className={cn(
          'aspect-square flex items-center justify-center p-2',
          isGrandPrix
            ? 'bg-gradient-to-br from-primary-50 to-primary-100'
            : 'bg-gradient-to-br from-beige-50 to-beige-100'
        )}
      >
        <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-primary-500 to-primary-600 text-white shadow-md'
              : 'bg-gradient-to-r from-primary-100 to-primary-200 text-primary-600'
          )}
        >
          {badge}
        </div>
        <h3 className="text-xl font-bold text-gray-800 mb-2">{title}</h3>
        <p className="text-gray-600 text-sm mb-4">{description}</p>
      </div>
    </div>
  );
};

export default PrizeCard;