import { SectionHeader } from '../ui/Section'
import { Text } from '../typography/Text'

export function EventDescription({ paragraphs = [] }) {
  if (!paragraphs.length) {
    return null
  }

  return (
    <section aria-labelledby="event-description-heading" className="py-10 md:py-12">
      <SectionHeader eyebrow="About" title="The edition" />
      <div id="event-description-heading" className="sr-only">About this event</div>
      <div className="max-w-prose space-y-5">
        {paragraphs.map((paragraph) => (
          <Text key={paragraph.slice(0, 32)} className="text-lg text-ink/90">
            {paragraph}
          </Text>
        ))}
      </div>
    </section>
  )
}