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

export const CollectionHeaderItem = ({ collection, active, onSelect }: { collection: RommCollection, active: boolean, onSelect: () => void }) => (
  <FocusableItem 
    onFocus={onSelect} 
    onClick={onSelect}
    className="shrink-0"
    focusKey={`COLLECTION_${collection.id}`}
    active={active}
  >
    {(focused) => (
      <div className="flex flex-col items-center gap-2 group cursor-pointer w-[6.875rem]">
        <div className={`w-[5.25rem] h-[5.25rem] rounded-xl transition-all duration-500 border-2 flex items-center justify-center p-3 overflow-hidden
          ${focused || active ? 'border-[#2563eb] bg-transparent scale-110 z-20 shadow-[0_5px_15px_rgba(37,99,235,0.2)]' : 
            'bg-white/5 border-white/5 group-hover:border-white/10'}`}
        >
          {collection.coverUrl ? (
            <img 
              src={collection.coverUrl} 
              alt={collection.name} 
              className={`w-full h-full object-cover transition-all duration-500 ${focused || active ? 'scale-110 brightness-100' : 'grayscale brightness-150 opacity-30 group-hover:opacity-60'}`} 
            />
          ) : (
             <span className={`material-symbols-outlined text-3xl transition-colors ${focused || active ? 'text-white' : 'text-white/20'}`}>
               {collection.is_favorite ? 'star' : 'library_books'}
             </span>
          )}
        </div>
        <div className={`text-[0.5625rem] font-black uppercase geist-mono tracking-widest text-center transition-all duration-300 w-full px-2 truncate
          ${focused || active ? 'text-[#2563eb] translate-y-1' : 'text-white/20'}`}
        >
          {collection.name}
        </div>
      </div>
    )}
  </FocusableItem>
);
