import { ChevronRight, Presentation } from 'lucide-react';

export default function SlideDeckCard({ deck }) {
  return (
    <div className="brutal-card group cursor-pointer">
      {/* Slide preview */}
      <div className="relative aspect-[16/9] bg-brutal-black mb-4 overflow-hidden">
        <img 
          src={deck.preview} 
          alt={deck.title}
          className="w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity"
        />
        <div className="absolute inset-0 flex items-center justify-center">
          <Presentation size={48} className="text-brutal-white opacity-60" />
        </div>
        {/* Slide count badge */}
        <div className="absolute bottom-2 right-2 bg-brutal-white px-2 py-1 font-mono text-xs border-2 border-brutal-black">
          {deck.slideCount} slides
        </div>
      </div>

      {/* Content */}
      <div className="space-y-3">
        <div className="flex items-center gap-2">
          <span className="font-mono text-xs bg-brutal-black text-brutal-white px-2 py-1">
            {deck.topic}
          </span>
          {deck.isNew && (
            <span className="font-mono text-xs bg-brutal-accent text-brutal-white px-2 py-1">
              NEW
            </span>
          )}
        </div>

        <h3 className="font-bold text-lg group-hover:text-brutal-accent transition-colors">
          {deck.title}
        </h3>

        <p className="text-sm text-brutal-gray line-clamp-2">
          {deck.description}
        </p>

        <div className="flex items-center justify-between pt-2">
          <div className="flex -space-x-2">
            {deck.authors.map((author, i) => (
              <img 
                key={i}
                src={author.avatar}
                alt={author.name}
                className="w-8 h-8 border-2 border-brutal-white"
              />
            ))}
          </div>
          <button className="font-mono text-sm flex items-center gap-1 group-hover:gap-2 transition-all">
            View Deck
            <ChevronRight size={16} />
          </button>
        </div>
      </div>
    </div>
  );
}