import React from 'react'

const FALLBACK_MD = 'https://files.skinbase.org/default/missing_md.webp'

export default function ArtworkCardMini({ item }) {
  if (!item?.url) return null

  return (
    <article className="group min-w-[14rem] shrink-0 snap-start overflow-hidden rounded-xl border border-white/[0.06] bg-white/[0.03] transition-all duration-200 hover:-translate-y-0.5 hover:border-white/[0.1] hover:shadow-xl hover:shadow-black/30">
      <a href={item.url} className="block">
        <div className="relative aspect-[4/3] overflow-hidden bg-deep">
          <img
            src={item.thumb || FALLBACK_MD}
            srcSet={item.thumbSrcSet || undefined}
            sizes="256px"
            alt={item.title || 'Artwork'}
            className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.04]"
            loading="lazy"
            decoding="async"
            onError={(event) => {
              event.currentTarget.src = FALLBACK_MD
            }}
          />
          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-60" />
        </div>
        <div className="px-3.5 py-3">
          <h3 className="truncate text-sm font-semibold text-white/90">{item.title || 'Untitled'}</h3>
          <p className="mt-0.5 truncate text-xs text-white/40">by {item.author || 'Artist'}</p>
        </div>
      </a>
    </article>
  )
}