import Image from "next/image"
import type { ReactNode } from "react"

export function FeatureSplit({
  children,
  image,
  alt,
  reverse = false,
}: {
  children: ReactNode
  image: string
  alt: string
  reverse?: boolean
}) {
  return (
    <div className="grid wedding-lg:grid-cols-2">
      <div
        className={`flex items-center bg-wedding-ivory px-wedding-gutter-mobile py-wedding-section wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop ${reverse ? "wedding-lg:order-2" : ""}`}
      >
        <div className="wedding-lg:mx-auto w-full max-w-md">{children}</div>
      </div>
      <div className={`relative min-h-96 ${reverse ? "wedding-lg:order-1" : ""}`}>
        <Image className="object-cover" src={image} alt={alt} fill sizes="(min-width: 900px) 60vw, 100vw" />
      </div>
    </div>
  )
}