import Link from "next/link"

import { RsvpForm } from "@/components/invite/rsvp-form"
import { WeddingContainer } from "@/components/invite/wedding-container"
import type { InvitationDetail } from "@/lib/db/queries/invitations"
import type { ToastRequest } from "@/lib/db/types"
import type { GuestDictionary } from "@/lib/i18n/dictionaries"
import type { InvitePageContent } from "@/lib/i18n/invite-page/content"

export function RsvpSection(props: {
  action: (formData: FormData) => void | Promise<void>
  detail: InvitationDetail
  token: string
  dictionary: GuestDictionary
  content: InvitePageContent["rsvp"]
  closed: boolean
  toastRequest: ToastRequest | undefined
  photo: { filename: string | null; url: string } | null
  submitted?: string
  error?: string
}) {
  const message = props.closed ? props.dictionary.deadline.closed : props.submitted ? props.dictionary.form.submitted : props.error === "closed" ? props.dictionary.errors.closed : props.error ? props.dictionary.errors.generic : null
  const isSingularPerson = props.detail.members.length === 1;
  return (
    <section id="rsvp" className="bg-wedding-ivory pt-wedding-section">
      <WeddingContainer wide>
        <div className="grid gap-14">
          <div className="" >
            <p className="wedding-section-label">{props.content.eyebrow}</p>
            <h2 className="wedding-display-heading text-wedding-page mt-4" >{props.detail.invitation.display_name}</h2>
            <h2 className="wedding-display-heading mt-5 text-wedding-medium">{isSingularPerson ? props.content.heading_singular : props.content.heading_plural}</h2>
            <div className="mt-7 w-12 border-t-2 border-wedding-terracotta" />
            <p className="mt-7 font-wedding-ui text-wedding-body leading-wedding-body">{props.content.paragraph} <strong>{props.content.deadline}</strong>.</p>
            <p className="mt-4 font-wedding-display text-wedding-medium italic text-wedding-terracotta">{isSingularPerson ? props.content.helper_singular : props.content.helper_plural}</p><Link className="mt-12 inline-block wedding-text-link" href="#faq">{props.content.faqLink} →</Link></div>
          <div>{message ? <p aria-live="polite" className="border border-wedding-line bg-wedding-cream p-5 font-wedding-ui text-sm">{message}</p> : null}<RsvpForm {...props} /></div>
        </div>
      </WeddingContainer>
    </section>
  )
}