import React from 'react'
import WorldChallengeArtworkCard from './WorldChallengeArtworkCard'

export default function WorldChallengeFinalistsGrid({ panel, section = null }) {
  const items = Array.isArray(section?.items) ? section.items : []

  if (items.length === 0 && (!panel?.show_finalists || panel?.supports_finalists)) {
    return null
  }

  return (
    <section className="mt-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
      <div className="mb-5">
        <h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">{section?.title || 'Challenge finalists'}</h2>
        <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">
          {section?.description || 'Finalists from the linked challenge stay visible here so the world can carry the full result set forward as a public recap.'}
        </p>
      </div>
      {items.length > 0 ? (
        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
          {items.map((item) => <WorldChallengeArtworkCard key={item.id} item={item} sectionKey="challenge_finalists" challengeId={panel?.id || null} />)}
        </div>
      ) : (
        <div className="rounded-[24px] border border-dashed border-white/10 bg-black/20 p-5 text-sm leading-6 text-slate-400">
          Finalists will appear here automatically once the linked challenge publishes them as structured outcomes.
        </div>
      )}
    </section>
  )
}