import React from 'react'

export default function ActivityArtworkPreview({ artwork }) {
  if (!artwork?.url || !artwork?.thumb) return null

  return (
    <a
      href={artwork.url}
      className="group block w-full shrink-0 overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.03] sm:w-[120px]"
    >
      <div className="aspect-[6/5] overflow-hidden bg-black/20">
        <img
          src={artwork.thumb}
          alt={artwork.title || 'Artwork'}
          className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.04]"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div className="border-t border-white/[0.06] px-3 py-2">
        <p className="truncate text-[11px] font-medium text-white/65">{artwork.title || 'Artwork'}</p>
      </div>
    </a>
  )
}