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

export default function HomeTrendingForYou({ items, preferences }) {
  if (!Array.isArray(items) || items.length === 0) return null

  const topTag  = preferences?.top_tags?.[0]
  const heading = 'Picked For You'
  const subheading = topTag
    ? `Fresh recommendations informed by your recent interest in #${topTag}.`
    : 'A live preview of your personalized discovery feed.'
  const link = '/discover/for-you'

  return (
    <section className="mt-14 px-4 sm:px-6 lg:px-8">
      <div className="mb-5 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
        <div>
          <p className="text-[0.7rem] font-semibold uppercase tracking-[0.28em] text-sky-200/70">Personalized feed</p>
          <h2 className="mt-2 text-xl font-bold text-white">{heading}</h2>
          <p className="mt-1 max-w-2xl text-sm text-slate-300">{subheading}</p>
        </div>
        <a href={link} className="text-sm text-nova-300 transition hover:text-white">
          Open full feed →
        </a>
      </div>
      <ArtworkGalleryGrid items={items.slice(0, 8)} compact />
    </section>
  )
}