import { 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'
import { RichText } from '@/components/Text/RichText'
import { SerializedEditorState } from 'lexical'

type ImageWithTextProps = {
  backgroundColor?: 'soft' | "off-white" | 'none',
  padding?: 'small' | 'medium' | 'large',
  title?: string,
  titleSize?: 'xl' | 'lg' | 'md' | 'sm',
  image: StaticImageData | string,
  text: string | SerializedEditorState,
  imagePosition?: 'left' | 'right',
  ratio?: '1/2' | '1/3',
  link?: React.ReactNode
  schema?: 'base' | 'contrast',
  unoptimized?: boolean,
  opaque?: boolean
  alternativeText?: string
}

export const ImageWithText = (
  {
    backgroundColor,
    padding,
    title,
    image,
    titleSize = 'lg',
    text, link,
    imagePosition = 'left',
    ratio = '1/2',
    schema = 'base',
    unoptimized = true,
    opaque = false,
    alternativeText = ''
  }: ImageWithTextProps) => {

  const bg = backgroundColor === "none" ? undefined : backgroundColor;

  return (
    <Section backgroundColor={bg} padding={padding}>
      <Container>
        <Row alignItems={'center'}>
          <div
            className={classNames(styles.col, styles.imageCol, { [styles.imageThird]: ratio === '1/3' })}
            style={{ order: imagePosition === 'right' ? 1 : 0 }}
          >
            <Image
              className={classNames({[styles.image]: true, [styles.imageOpaque]: opaque})}
              width={800}
              height={800}
              src={image}
              objectFit={'cover'}
              unoptimized={unoptimized}
              alt={alternativeText} />
          </div>
          <div className={classNames(styles.col, { [styles.textTwoThirds]: ratio === '1/3' })}>
            {title && <Title title={title} size={titleSize} color={schema} />}

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

            {typeof text === 'string'
              ? <TextDiv text={text} />
              : <RichText data={text} />}

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