import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { Title } from '@/components/Title/Title'
import { Col } from '@/components/Flex/Col'
import { Row } from '@/components/Flex/Row'
import { TextDiv } from '@/components/Text/TextDiv'
import type { ReactNode } from 'react'

type ContactSectionViewProps = {
  title: string
  description: string
  backgroundColor?: 'off-white'
  schema?: 'base' | 'contrast'
  form: ReactNode
}

export const ContactSectionView = ({
  title,
  description,
  schema,
  backgroundColor,
  form,
}: ContactSectionViewProps) => {
  return (
    <Section backgroundColor={backgroundColor}>
      <Container>
        <Row>
          <Col>
            <Title title={title} size={'md'} color={schema} />
            <TextDiv text={description} />
          </Col>
          <Col>{form}</Col>
        </Row>
      </Container>
    </Section>
  )
}
