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

/**
 * Personalized trending: artworks matching user's top tags, sorted by trending score.
 * Label and browse link adapt to the user's first top tag.
 */
export default function HomeTrendingForYou({ items, preferences }) {
  if (!Array.isArray(items) || items.length === 0) return null

  const topTag  = preferences?.top_tags?.[0]
  const heading = topTag ? `🎯 Trending in #${topTag}` : '🎯 Trending For You'
  const link    = topTag ? `/browse?tags=${encodeURIComponent(topTag)}&sort=trending` : '/discover/trending'

  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <div className="mb-5 flex items-center justify-between">
        <h2 className="text-xl font-bold text-white">{heading}</h2>
        <a href={link} className="text-sm text-nova-300 hover:text-white transition">
          See all →
        </a>
      </div>
      <ArtworkGalleryGrid items={items.slice(0, 8)} compact />
    </section>
  )
}