import { MagicCard } from "./MagicCard";
import { useFocusableAutoScroll } from '../hooks/useFocusableAutoScroll';

export const CollectionCard = ({ 
  name, 
  caption, 
  coverUrl, 
  icon 
}: { 
  name: string; 
  caption: string; 
  coverUrl?: string;
  icon?: string;
}) => {
  const { ref, focused } = useFocusableAutoScroll({
    onEnterPress: () => console.log('Opening collection', name)
  });

  return (
    <MagicCard 
      ref={ref}
      className={`w-56 shrink-0 cursor-pointer group flex flex-col p-3 rounded-[12px] 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" : ""}`} 
    >
      <div className="aspect-[2/3] bg-white/5 overflow-hidden mb-3 rounded-[8px] border border-white/5 shadow-inner relative flex flex-col items-center justify-center transition-colors duration-300 group-hover:bg-[#2563eb]/10">
        {coverUrl ? (
          <img 
            alt={name} 
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" 
            src={coverUrl} 
          />
        ) : (
          <span className="material-symbols-outlined text-[#c3c6d7]/30 text-5xl group-hover:text-[#2563eb] group-hover:scale-110 transition-all duration-500" style={{ fontVariationSettings: "'FILL' 1" }}>
            {icon || 'inventory_2'}
          </span>
        )}
      </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">{name}</h4>
        <p className="text-[10px] text-[#2563eb] uppercase geist-mono tracking-widest font-bold mt-1 opacity-80">{caption}</p>
      </div>
    </MagicCard>
  );
};
