import React from 'react'

export default function ActivityArtworkPreview({ artwork, story }) {
  if (artwork?.url && artwork?.thumb) {
    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>
    )
  }

  if (!story?.url || !story?.cover_url) return null

  return (
    <a
      href={story.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={story.cover_url}
          alt={story.title || 'Story'}
          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">{story.title || 'Story'}</p>
      </div>
    </a>
  )
}