import { PageHeader } from '@/compositions/PageHeader/PageHeader'
import { fetchDonationForm } from '@/fetch/donationform'
import { notFound } from 'next/navigation'
import { RichText } from '@/components/Text/RichText'
import { Container } from '@/components/Container/Container'
import { Section } from '@/components/Section/Section'
import styles from '@/components/DonationForm/styles.module.scss'
import { Row } from '@/components/Flex/Row'
import { Col } from '@/components/Flex/Col'
import Image from 'next/image'

export default async function DonationPage({ params }: { params: Promise<{id: string}>}) {
  const id = (await params).id;
  const data = await fetchDonationForm(id);

  if(!data) {
    notFound()
  }

  const image = data.photo;

  return (
    <>
      <PageHeader
        title={'Spendenformular'}
        description={'Wir freuen uns über jede Spende und wissen: „Wer gibt, empfängt!“ (Lk 6,38)'}
      />

        <Container>
          <Section padding={"small"} paddingBottom={"medium"}>
            <Row alignItems={"center"}>
              <Col>
                { typeof image == "object" && image.url &&
                  <Image src={image.url} width={300} height={300} alt="" unoptimized={false}/>
                }
              </Col>
              <Col>
                <RichText data={data.text} />
              </Col>
            </Row>
          </Section>
          <Section padding={"small"} paddingBottom={"large"}>
            <iframe
              className={styles.iframe}
              scrolling="no"
              src={data.url}
              width="100%"
              height="800px">
            </iframe>
          </Section>
        </Container>
    </>
  )
}