import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { Logo } from '@/components/Logo/Logo'
import styles from './styles.module.scss'
import { Row } from '@/components/Flex/Row'
import { Col } from '@/components/Flex/Col'
import { RandomPrayer } from '@/components/RandomPrayer/RandomPrayer'
import Link from 'next/link'
import type { Footer } from '@/payload-types'

type FooterViewProps = {
  prayers: string[]
  footer: Footer
}

export const FooterView = ({ prayers, footer }: FooterViewProps) => {
  return (
    <div className={styles.container}>
      <Section backgroundColor="soft">
        <Container>
          <Row>
            <Col>
              <br />
              <Logo
                color={'#ffffff'}
                textColor={'var(--base-color)'}
                withText={true}
                height={100}
              />
            </Col>

            <Col>
              <Row gap={25}>
                {footer.groups?.map((group, i) => (
                  <Col key={i}>
                    <p>
                      <strong>{group.title}</strong>
                    </p>
                    <ul className={styles.list}>
                      {group.links?.map((link, j) => (
                        <li key={j}>
                          <Link href={link.href}>{link.label}</Link>
                        </li>
                      ))}
                    </ul>
                  </Col>
                ))}
                <Col>
                  <p>
                    <strong>Gebet</strong>
                  </p>
                  <RandomPrayer prayers={prayers} />
                </Col>
              </Row>
            </Col>
          </Row>
        </Container>
      </Section>
    </div>
  )
}
