import React from 'react';
import { Heart } from 'lucide-react';

export default function GameCard({ game, tall = false }) {
  return (
    <>
      <div className="relative overflow-hidden rounded-[12px] bg-[#0b5a5d] shadow">
        {game.favorite ? (
          <div className="absolute right-2 top-2 z-20 rounded-full p-[3px]">
            <Heart className="h-4 w-4 fill-red-500 text-white" />
          </div>
        ) : null}

        <div className={`${tall ? 'aspect-[0.68]' : 'aspect-[0.72]'} relative w-full bg-[#0a4044]`}>
          <img
            src={game.image}
            alt={game.name}
            className="h-full w-full object-cover"
          />

          {/* dark overlay */}
          <div className="pointer-events-none absolute inset-0 z-[1] bg-gradient-to-b from-white/5 via-transparent to-black/20" />

          {/* top sweep / shine */}
          <span className="card-sweep pointer-events-none absolute inset-[-70%] z-[2]" />

          {/* optional bottom fade for more glossy look */}
          <div className="pointer-events-none absolute bottom-0 left-0 right-0 z-[1] h-[42%] bg-gradient-to-t from-white/20 via-white/5 to-transparent" />
        </div>
      </div>

      <style>{`
        .card-sweep {
          background: linear-gradient(
            110deg,
            rgba(255, 255, 255, 0) 22%,
            rgba(255, 255, 255, 0.05) 38%,
            rgba(255, 255, 255, 0.12) 45%,
            rgba(255, 255, 255, 0.24) 50%,
            rgba(255, 255, 255, 0.12) 55%,
            rgba(255, 255, 255, 0.05) 62%,
            rgba(255, 255, 255, 0) 76%
          );
          mix-blend-mode: screen;
          opacity: 1;
          transform: translateX(-95%) rotate(12deg);
          animation: cardSweepMove 3.2s linear infinite;
          will-change: transform;
        }

        @keyframes cardSweepMove {
          0% {
            transform: translateX(-95%) rotate(12deg);
          }
          100% {
            transform: translateX(95%) rotate(12deg);
          }
        }
      `}</style>
    </>
  );
}