import { Col } from '@/components/Flex/Col'
import styles from '@/pageComponents/Parish/styles.module.scss'
import { ChurchCard } from '@/components/ChurchCard/ChurchCard'
import { Title } from '@/components/Title/Title'
import { TextDiv } from '@/components/Text/TextDiv'
import { Row } from '@/components/Flex/Row'
import { church as transform } from '@/utils/church'

type ChurchWithContactProps = {
  church: string,
  contact: string
}

export const ChurchWithContact = ({church, contact}: ChurchWithContactProps) => {
  const c = transform(church)


  return (
    <Row alignItems={"center"}>
      <Col>
        <div className={styles.churchIcon}>
          <ChurchCard church={c} backgroundColor={'#E0DAE5'} />
        </div>
      </Col>
      <Col>
        <Title title={"Kontakt"} size={"md"} color={"contrast"} />
        <TextDiv text={contact} />
      </Col>
    </Row>
  )
}