---
import PrimaryCTA from '@components/buttons/PrimaryCTA.astro'
import { Image } from 'astro:assets'

const {
    title,
    subTitle,
    btnExists,
    btnTitle,
    btnURL,
    single,
    imgOne,
    imgOneAlt,
    imgTwo,
    imgTwoAlt,
} = Astro.props

interface Props {
    title: string
    subTitle: string
    btnExists?: boolean
    btnTitle?: string
    btnURL?: string
    single?: boolean
    imgOne?: any
    imgOneAlt?: any
    imgTwo?: any
    imgTwoAlt?: any
}
---

<section class="mx-auto max-w-[85rem] items-center gap-16 px-4 py-10 sm:px-6 lg:grid lg:grid-cols-2 lg:px-8 lg:py-14 2xl:max-w-full">
    <div>
        <h2 class="mb-4 text-balance text-4xl font-extrabold tracking-tight text-neutral-800 dark:text-neutral-200">
            {title}
        </h2>
        <p class="mb-4 max-w-prose text-pretty font-light text-neutral-600 dark:text-neutral-400 sm:text-lg">
            {subTitle}
        </p>
        {
            btnExists ? <PrimaryCTA title={btnTitle} url={btnURL} /> : null
        }
    </div>

    {
        single
            ? (
                <div class="mt-8">
                    <Image
                        class="w-full rounded-lg"
                        src={imgOne}
                        alt={imgOneAlt}
                        format="avif"
                        loading="lazy"
                    />
                </div>
            )
            : (
                <div class="mt-8 grid grid-cols-2 gap-4">
                    <Image
                        class="w-full rounded-xl"
                        src={imgOne}
                        alt={imgOneAlt}
                        draggable="false"
                        format="avif"
                        loading="lazy"
                    />
                    <Image
                        class="mt-4 w-full rounded-xl lg:mt-10"
                        src={imgTwo}
                        alt={imgTwoAlt}
                        draggable="false"
                        format="avif"
                        loading="lazy"
                    />
                </div>
            )
    }
</section>