import { useState } from 'react';

const Card = ({ card, onClick, isFlipped, isMatched }) => {
  return (
    <div
      className={`relative w-24 h-24 md:w-32 md:h-32 cursor-pointer transform transition-all duration-300 ${
        isFlipped || isMatched ? 'rotate-y-180' : ''
      }`}
      onClick={onClick}
    >
      <div
        className={`absolute inset-0 w-full h-full transition-all duration-300 ${
          isFlipped || isMatched ? 'opacity-100' : 'opacity-0'
        }`}
        style={{ transform: 'rotateY(180deg)' }}
      >
        <div className="w-full h-full flex items-center justify-center bg-white rounded-lg shadow-lg border-2 border-gray-200">
          <span className="text-4xl md:text-5xl">{card.emoji}</span>
        </div>
      </div>
      <div
        className={`absolute inset-0 w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-lg border-2 border-gray-300 ${
          isFlipped || isMatched ? 'opacity-0' : 'opacity-100'
        }`}
        style={{ transform: 'rotateY(0deg)' }}
      >
        <span className="text-white text-4xl md:text-5xl">?</span>
      </div>
    </div>
  );
};

export default Card;