components/PodcastCard.js

import { Play, Clock, Calendar } from 'lucide-react';

export default function PodcastCard({ podcast }) {
  return (
    <div className="brutal-card group cursor-pointer">
      {/* Thumbnail */}
      <div className="relative aspect-video bg-brutal-black mb-4 overflow-hidden">
        <img 
          src={podcast.image} 
          alt={podcast.title}
          className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity"
        />
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="w-16 h-16 bg-brutal-white border-2 border-brutal-black flex items-center justify-center shadow-brutal group-hover:shadow-brutal-hover group-hover:scale-110 transition-all">
            <Play size={24} className="ml-1" />
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="space-y-3">
        <div className="flex items-center gap-3">
          <span className="font-mono text-xs bg-brutal-black text-brutal-white px-2 py-1">
            {podcast.category}
          </span>
          <span className="font-mono text-xs text-brutal-gray flex items-center gap-1">
            <Clock size={12} />
            {podcast.duration}
          </span>
        </div>

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

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

        <div className="flex items-center gap-2 pt-2 border-t-2 border-brutal-black/10">
          <img 
            src={podcast.hostAvatar} 
            alt={podcast.host}
            className="w-8 h-8 border-2 border-brutal-black"
          />
          <div>
            <p className="font-mono text-xs font-semibold">{podcast.host}</p>
            <p className="font-mono text-xs text-brutal-gray flex items-center gap-1">
              <Calendar size={10} />
              {podcast.date}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}