export default function RoastCard({ image, caption }) {
  return (
    <div className="group relative overflow-hidden rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 hover:scale-105 bg-white">
      <div className="aspect-square overflow-hidden">
        <img
          src={`/images/${image}`}
          alt={caption || 'Roast photo'}
          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
        />
      </div>
      {caption && (
        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
          <p className="text-white text-sm md:text-base font-medium text-center">
            {caption}
          </p>
        </div>
      )}
    </div>
  )
}
