import React from 'react'
import ArtworkGalleryGrid from '../../components/artwork/ArtworkGalleryGrid'

export default function HomeMedalHighlights({ title, href = null, items, description = '' }) {
  if (!Array.isArray(items) || items.length === 0) return null

  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <div className="mb-5 flex items-end justify-between gap-4">
        <div>
          <h2 className="text-xl font-bold text-white">{title}</h2>
          {description ? <p className="mt-2 max-w-2xl text-sm text-slate-400">{description}</p> : null}
        </div>
        {href ? (
          <a href={href} className="text-sm text-nova-300 transition hover:text-white">
            See all →
          </a>
        ) : null}
      </div>

      <ArtworkGalleryGrid items={items} className="xl:grid-cols-4" />
    </section>
  )
}