import React from 'react'

export default function WorldRecapArticleCard({ article }) {
  if (!article?.url) {
    return null
  }

  return (
    <section className="mt-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
      <div className="grid gap-5 lg:grid-cols-[minmax(0,1.1fr)_16rem] lg:items-center">
        <div>
          <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{article.eyebrow || 'Recap article'}</div>
          <h2 className="mt-3 text-2xl font-semibold tracking-[-0.03em] text-white">{article.title}</h2>
          {article.description ? <p className="mt-3 max-w-3xl text-sm leading-7 text-slate-300">{article.description}</p> : null}
          {Array.isArray(article.meta) && article.meta.length > 0 ? <div className="mt-4 flex flex-wrap gap-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">{article.meta.map((item) => <span key={item}>{item}</span>)}</div> : null}
        </div>
        <div className="flex flex-col gap-3 lg:items-end">
          {article.image ? <img src={article.image} alt={article.title} className="h-32 w-full rounded-[24px] border border-white/10 object-cover lg:w-56" /> : null}
          <a href={article.url} data-world-event="world_cta_clicked" data-world-section-key="recap_article" data-world-cta-key="recap_article" className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-400/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">{article.cta_label || 'Read article'}<i className="fa-solid fa-arrow-right" /></a>
        </div>
      </div>
    </section>
  )
}