import { Play } from 'lucide-react';
import { Artwork } from './Artwork';

interface MediaCardProps {
  seed: string;
  title: string;
  subtitle?: string;
  artSrc?: string | null;
  onClick?: () => void;
}

export function MediaCard({ seed, title, subtitle, artSrc, onClick }: MediaCardProps) {
  return (
    <button
      onClick={onClick}
      className="card-surface group text-left w-full"
    >
      <div className="artwork-frame relative w-full">
        <Artwork seed={seed} src={artSrc} className="w-full h-full transition-transform duration-500 group-hover:scale-105" rounded="xl" />
        <div className="play-overlay">
          <div className="play-overlay-btn">
            <Play size={18} fill="currentColor" className="ml-0.5" />
          </div>
        </div>
      </div>
      <div className="min-w-0">
        <div className="truncate text-sm font-semibold text-text">{title}</div>
        {subtitle && <div className="truncate text-xs text-muted mt-0.5">{subtitle}</div>}
      </div>
    </button>
  );
}