import Image from 'next/image'
import TextDisplay from "./clientcomponents/TextDisplay";

const ImageWithText = ({
  title,
  description,
  imageSrc,
  imageAlt = "Section image",
  imagePosition = "right",
}) => {
  const isImageLeft = imagePosition === "left"
  const hasImage = !!imageSrc

  const textBlock = (
    <div>
      {title && (
        <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mt-2 mb-4 md:mb-6">
          {title}
        </h2>
      )}
      {description && (
        <TextDisplay
          content={description}
          className="prose prose-lg max-w-none sn-content"
        />
      )}
    </div>
  )

  const imageBlock = hasImage ? (
    <div className="relative rounded-xl overflow-hidden shadow-lg mt-6 md:mt-0">
      <Image
        src={imageSrc}
        alt={imageAlt}
        width={800}
        height={500}
        className="w-full h-auto object-cover"
      />
    </div>
  ) : null

  return (
    <section className="py-12 md:py-16 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className={`grid gap-8 md:gap-12 items-center ${hasImage ? 'md:grid-cols-2' : 'md:grid-cols-1'}`}>
          {isImageLeft ? (
            <>
              {imageBlock}
              {textBlock}
            </>
          ) : (
            <>
              {textBlock}
              {imageBlock}
            </>
          )}
        </div>
      </div>
    </section>
  )
}

export default ImageWithText