import React from 'react'

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

export default function ArtworkRelated({ related }) {
  if (!Array.isArray(related) || related.length === 0) return null

  return (
    <section className="mt-12">
      <h2 className="text-lg font-semibold text-white">Related Artworks</h2>

      <div className="mt-5 flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2 lg:grid lg:grid-cols-4 lg:gap-5 lg:overflow-visible">
        {related.slice(0, 12).map((item) => (
          <article
            key={item.id}
            className="group min-w-[75%] snap-start overflow-hidden rounded-xl border border-nova-700 bg-panel transition lg:min-w-0 lg:hover:border-nova-500"
          >
            <a href={item.url} className="block">
              <div className="relative aspect-video bg-deep">
                <img
                  src={item.thumb || FALLBACK_MD}
                  srcSet={item.thumb_srcset || undefined}
                  sizes="(min-width: 1024px) 25vw, 75vw"
                  alt={item.title || 'Artwork'}
                  className="h-full w-full object-cover transition duration-300 lg:group-hover:scale-[1.03]"
                  loading="lazy"
                  decoding="async"
                  onError={(event) => {
                    event.currentTarget.src = FALLBACK_MD
                  }}
                />
                <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-deep/25 to-transparent lg:opacity-0 lg:transition lg:duration-300 lg:group-hover:opacity-100" />
              </div>
              <div className="p-3">
                <h3 className="truncate text-sm font-semibold text-white">{item.title}</h3>
                <p className="truncate text-xs text-soft">by {item.author || 'Artist'}</p>
              </div>
            </a>
          </article>
        ))}
      </div>
    </section>
  )
}