import parse from "html-react-parser"
import React from "react"

import type { IButton } from "@/components/Button"
import Button from "@/components/Button"
import type { IContainer } from "@/components/Container"
import Container from "@/components/Container"
import type { IImage } from "@/components/Image"
import Image from "@/components/Image"
import type { ISection } from "@/components/Section"
import Section from "@/components/Section"
import type { ITitle } from "@/components/Title"
import Title from "@/components/Title"

export interface ITextAndImage {
  text: string
  image: IImage
  button: IButton
  section: ISection
  headline: ITitle
  alignment: "left" | "right"
  container: IContainer
}

export default function TextAndImage(props: ITextAndImage) {
  const { alignment, button, container, headline, image, section, text } = props

  return (
    <>
      <Section {...section}>
        <Container {...container}>
          <div>
            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-16 items-center justify-center">
              <div
                className={`relative overflow-hidden min-h-60 md:min-h-80 ${alignment === "left" ? "lg:order-first" : alignment === "right" ? "lg:order-last" : ""}`}>
                <Image className="absolute inset-0 h-full w-full object-cover" {...image} />
              </div>
              <div>
                <Title {...headline} />
                <p className="mt-4 my-8">{parse(text)}</p>
                <Button {...button} />
              </div>
            </div>
          </div>
        </Container>
      </Section>
    </>
  )
}