import { MagicCard } from "./MagicCard";
import { syncToPC } from "../utils/sync";
import { Game } from "../api/client";
import { useFocusableAutoScroll } from '../hooks/useFocusableAutoScroll';

export const GameCard = ({ game }: { game: Game }) => {
  const { ref, focused } = useFocusableAutoScroll({
    onEnterPress: () => syncToPC(game.id, game.title)
  });

  return (
    <MagicCard 
      ref={ref}
      className={`w-56 shrink-0 cursor-pointer group flex flex-col p-3 rounded-xl bg-[#1c1f2c] shadow-[0_10px_30px_rgba(0,0,0,0.2)] transition-all z-10 hover:z-20 ${focused ? "scale-105 ring-2 ring-[#2563eb] z-30" : ""}`} 
      onClick={() => syncToPC(game.id, game.title)}
    >
      <div className="aspect-[2/3] bg-white/5 overflow-hidden mb-3 rounded-lg border border-white/5 shadow-inner">
        <img 
          alt={game.title} 
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" 
          src={game.coverUrl} 
        />
      </div>
      
      <div className="px-1 flex flex-col relative z-20">
        <h4 className="text-sm font-black text-white truncate geist-mono uppercase tracking-tight">{game.title}</h4>
        <p className="text-[0.625rem] text-[#2563eb] uppercase geist-mono tracking-widest font-bold mt-1 opacity-80">{game.system}</p>
      </div>
    </MagicCard>
  );
};
