import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { ContactForm } from '@/compositions/ContactForm/ContactForm'
import { Title } from '@/components/Title/Title'
import { Col } from '@/components/Flex/Col'
import { Row } from '@/components/Flex/Row'
import { TextDiv } from '@/components/Text/TextDiv'

type ContactSectionProps = {
  title: string,
  description: string,
  backgroundColor?: 'off-white'
  schema?: 'base' | 'contrast'
}


export const ContactSection = ({title, description, schema, backgroundColor}: ContactSectionProps) => {
  return (
    <Section backgroundColor={backgroundColor}>
      <Container>
        <Row>
          <Col>
            <Title title={title} size={"md"} color={schema}/>
            <TextDiv text={description} />
          </Col>
          <Col>
            <ContactForm schema={schema}/>
          </Col>
        </Row>
      </Container>
    </Section>
  )
}