import React from 'react'

function EntityCard({ item, sectionKey }) {
  return (
    <a href={item.url} data-world-event="world_entity_clicked" data-world-section-key={sectionKey} data-world-entity-type={item.entity_type || ''} data-world-entity-id={item.id} data-world-entity-title={item.title || ''} className="group rounded-[26px] border border-white/10 bg-white/[0.03] p-4 transition duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.05]">
      <div className="relative overflow-hidden rounded-[22px] border border-white/10 bg-slate-950/70">
        {item.image ? (
          <img src={item.image} alt={item.title} className="aspect-[16/10] w-full object-cover transition duration-500 group-hover:scale-[1.04]" />
        ) : (
          <div className="aspect-[16/10] w-full bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.18),_transparent_42%),linear-gradient(135deg,_rgba(15,23,42,0.96),_rgba(2,6,23,0.96))]" />
        )}
        {item.avatar ? <img src={item.avatar} alt="" className="absolute bottom-3 left-3 h-12 w-12 rounded-2xl border border-white/15 object-cover shadow-lg shadow-black/40" /> : null}
      </div>
      <div className="mt-4">
        {item.context_label ? <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100/70">{item.context_label}</div> : null}
        <h3 className="mt-2 text-lg font-semibold tracking-[-0.02em] text-white">{item.title}</h3>
        {item.subtitle ? <div className="mt-1 text-xs uppercase tracking-[0.16em] text-slate-500">{item.subtitle}</div> : null}
        {item.description ? <p className="mt-3 text-sm leading-6 text-slate-300">{item.description}</p> : null}
        {Array.isArray(item.meta) && item.meta.length > 0 ? (
          <div className="mt-4 flex flex-wrap gap-2">
            {item.meta.map((entry) => (
              <span key={entry} className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-xs text-slate-300">{entry}</span>
            ))}
          </div>
        ) : null}
      </div>
    </a>
  )
}

export default function WorldSection({ section }) {
  if (!section || !Array.isArray(section.items) || section.items.length === 0) {
    return null
  }

  return (
    <section className="mt-10">
      <div className="mb-5 flex items-end justify-between gap-4">
        <div>
          <h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">{section.title}</h2>
          {section.description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{section.description}</p> : null}
        </div>
        <div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{section.items.length} items</div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {section.items.map((item) => <EntityCard key={`${item.entity_type}-${item.id}`} item={item} sectionKey={section.key || ''} />)}
      </div>
    </section>
  )
}