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
  schema?: 'base' | 'contrast',
  unoptimized?: boolean,
  opaque?: boolean
}

export const ImageWithText = (
  {
    backgroundColor,
    title,
    image,
    text, link,
    schema = 'base',
    unoptimized = true,
    opaque = false,
  }: ImageWithTextProps) => {
  return (
    <Section backgroundColor={backgroundColor}>
      <Container>
        <Row alignItems={'center'}>
          <div className={classNames(styles.col, styles.imageCol)}>
            <Image
              className={classNames({[styles.image]: true, [styles.imageOpaque]: opaque})}
              width={800}
              height={800}
              src={image}
              objectFit={'cover'}
              unoptimized={unoptimized}
              alt={''} />
          </div>
          <div className={styles.col}>
            <Title title={title} size={'lg'} color={schema} />

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

            <TextDiv text={text} />

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