import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { Row } from '@/components/Flex/Row'
import { Col } from '@/components/Flex/Col'
import { Title } from '@/components/Title/Title'
import { NewsletterItem } from '@/compositions/PublicationAndNewsletter/NewsletterItem'
import styles from './styles.module.scss'
import Image from 'next/image'
import envelope from './envelope.svg'

export type NewsletterArchiveItem = {
  guid: string
  title: string
  link: string
  pubDate: string
}

type PublicationAndNewsletterViewProps = {
  archiveData: NewsletterArchiveItem[]
  magazineUrl?: string
  magazineCover?: {
    url?: string | null
    width?: number | null
    height?: number | null
  }
}

export const PublicationAndNewsletterView = ({
  archiveData,
  magazineUrl,
  magazineCover,
}: PublicationAndNewsletterViewProps) => {
  return (
    <Section backgroundColor={'off-white'}>
      <Container>
        <Row alignItems={'center'}>
          <Col>
            {magazineUrl && magazineCover?.url && (
              <a href={magazineUrl} target={'_blank'}>
                <Image
                  className={styles.image}
                  src={magazineCover.url}
                  width={magazineCover.width || 500}
                  height={magazineCover.height || 600}
                  alt={'Pfarreimagazin Ausgabe'}
                  unoptimized={false}
                />
              </a>
            )}
          </Col>
          <Col>
            <div className={styles.titleContainer}>
              <Image src={envelope} alt={'Newsletter icon'} />
              <Title title={'Newsletter aus dem Bistum'} size={'md'} />
            </div>

            {archiveData.map((item) => (
              <NewsletterItem
                key={item.guid}
                title={item.title}
                link={item.link}
                pubDate={item.pubDate}
              ></NewsletterItem>
            ))}
          </Col>
        </Row>
      </Container>
    </Section>
  )
}
