import React from 'react';
import { Game } from '../api/client';
import { FocusableItem } from './FocusableItem';

export const GameListItem = ({ game, active, onFocus }: { game: Game, active: boolean, onFocus: () => void }) => (
  <FocusableItem 
    onFocus={onFocus} 
    onClick={onFocus}
    className="w-full"
    focusKey={`GAME_${game.id}`}
    scrollOptions={{ behavior: 'smooth', block: 'nearest' }}
    active={active}
  >
    {(focused) => (
      <div className={`flex items-center gap-4 px-6 py-2.5 cursor-pointer transition-all duration-300 border-l-4 ${focused ? 'bg-[#2563eb]/20 border-[#2563eb] z-10' : active ? 'bg-[#2563eb]/10 border-[#2563eb]/70' : 'border-transparent hover:bg-white/5'}`}>
        <div className="w-8 h-11 bg-white/5 rounded overflow-hidden shrink-0 border border-white/5">
          <img src={game.coverUrl} alt="" className="w-full h-full object-cover" />
        </div>
        <div className="min-w-0 flex-1 overflow-hidden">
          <div className="overflow-hidden whitespace-nowrap">
            <span className={`text-xs font-bold transition-colors ${focused ? 'marquee-active text-white' : active ? 'text-white' : 'text-white/60'}`}>
              {game.title}
            </span>
          </div>
          <div className="text-[0.625rem] text-white/40 font-medium geist-mono uppercase tracking-tight">
            {game.size}
          </div>
        </div>
      </div>
    )}
  </FocusableItem>
);
