import { BackgroundColor, Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title'
import { Container } from '@/components/Container/Container'
import Image, { StaticImageData } from 'next/image'
import styles from "./styles.module.scss"
import classNames from 'classnames'
import { Row } from '@/components/Flex/Row'
import { TextDiv } from '@/components/Text/TextDiv'

type ImageWithTextProps = {
  backgroundColor?: BackgroundColor,
  title: string,
  image: StaticImageData | string,
  text: string
  link?: React.ReactNode
}

export const ImageWithText = ({backgroundColor, title, image, text, link}: ImageWithTextProps) => {
  console.log(image)
  return (
    <Section backgroundColor={backgroundColor}>
      <Container>
        <Row alignItems={"center"}>
          <div className={classNames(styles.col, styles.imageCol)}>
            <Image className={styles.image} width={800} height={800} src={image} objectFit={"cover"} alt={""} />
          </div>
          <div className={styles.col}>
            <Title title={title} size={"lg"} />

            <Image className={styles.imageMobile} width={500} height={500} src={image} objectFit={"cover"} alt={""} />

            <TextDiv text={text} />

            {link &&
              <div className={styles.right}>
                {link}
              </div>
            }
          </div>
        </Row>
      </Container>
    </Section>
  )
}