import React from 'react'

export default function WorldRecapSummaryCard({ recap }) {
  if (!recap?.intro) {
    return null
  }

  return (
    <section className="mt-10 rounded-[28px] border border-white/10 bg-white/[0.03] p-5">
      <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Recap summary</div>
      <div className="prose prose-invert prose-sm mt-4 max-w-4xl prose-p:text-slate-300 prose-p:leading-7 prose-headings:text-white prose-strong:text-white prose-a:text-sky-300" dangerouslySetInnerHTML={{ __html: recap.intro }} />
    </section>
  )
}