import Image from "next/image"
import { CalendarDays, Clock3, MapPin } from "lucide-react"

import { Monogram } from "@/components/invite/monogram"
import { WeddingContainer } from "@/components/invite/wedding-container"
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"

const icons = [CalendarDays, MapPin, Clock3]

export function IntroductionSection({ content }: { content: InvitePageContent["introduction"] }) {
  return (
    <section id="introduction" className="bg-wedding-ivory py-wedding-section">
      <WeddingContainer>
        <Monogram />
        <div className="mt-10 grid gap-10 wedding-lg:grid-cols-2 wedding-lg:items-center">
          <div>
            <h2 className="wedding-display-heading text-wedding-page text-wedding-ink">{content.heading}</h2>
            <div className="mt-7 w-12 border-t-2 border-wedding-terracotta" />
            {content.paragraphs.map((paragraph) => <p className="mt-6 font-wedding-ui text-wedding-body leading-wedding-body" key={paragraph}>{paragraph}</p>)}
            <p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
          </div>
          <div className="relative mx-auto min-h-96 w-full max-w-md shadow-lg">
            <Image src="/images/schedule.png" alt="A candlelit wedding reception" fill className="object-cover" sizes="(min-width: 900px) 40vw, 90vw" />
          </div>
        </div>
        <div className="mt-14 grid border-y border-wedding-line wedding-md:grid-cols-3 wedding-md:border-y-0">
          {content.facts.map((fact, index) => {
            const Icon = icons[index]
            return <div className={`flex gap-4 px-0 py-7 wedding-md:px-6 wedding-md:py-0 ${index < content.facts.length - 1 ? "wedding-md:border-r wedding-md:border-wedding-line" : ""}`} key={fact.label}>
              <Icon className="mt-1 size-5 text-wedding-terracotta" aria-hidden="true" />
              <div><p className="wedding-section-label">{fact.label}</p><p className="mt-2 font-wedding-display text-wedding-medium">{fact.value}</p>{fact.description ? <p className="mt-1 font-wedding-ui text-sm">{fact.description}</p> : null}</div>
            </div>
          })}
        </div>
      </WeddingContainer>
    </section>
  )
}