import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { notFound } from 'next/navigation'
import { Event } from '@/payload-types'
import { Title } from '@/components/Title/Title'
import { HR } from '@/components/HorizontalRule/HorizontalRule'
import { readableDateTime } from '@/utils/readableDate'
import { TextDiv } from '@/components/Text/TextDiv'

export default async function EventPage({ params }: { params: Promise<{id: string}>}) {

  const id = (await params).id;
  const res = await fetch(`http://localhost:3000/api/event/${id}?depth=0`);

  if (!res.ok) {
    notFound()
  }

  const event = await res.json() as Event;

  return (
    <>
      <Section>
        <Container>
          <Title
            title={event.title}
            subtitle={readableDateTime(event.date)}
            size={"xl"}/>
        </Container>

        <HR />
      </Section>

      <Section>
        <Container textAlign={"center"}>
          <TextDiv text={event.shortDescription} />
          <p>
            <strong>Location</strong> <br/>
            {event.location}
          </p>
        </Container>
      </Section>
    </>


  )
}