---
import { markdownToHtml } from '@/lib/markdown';
import { Image } from 'astro:assets';

interface Props {
    textWithImage: TextWithImageComponent;
}

const textWithImage = Astro.props.textWithImage;

const imageSize = () => {
    if (textWithImage.imageSize === "small") return "aspect-2/1";
    else if (textWithImage.imageSize === "medium") return "aspect-26/17";
    else return "aspect-39/29";
}
---

<div
    id={`textwithimage-${textWithImage.id}`}
    class={`flex ${textWithImage.imageSide === "right" ? "lg:flex-row flex-col" : "lg:flex-row-reverse flex-col"} justify-between items-center py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18`}
>
    <div class="flex flex-col gap-2.5 lg:w-[50%] w-full">
        <h2 class="text-5xl font-bold">{textWithImage.title}</h2>
        { textWithImage.text !== null && (
            <div set:html={markdownToHtml(textWithImage.text)}></div>
        ) }
    </div>
    <div class="lg:w-[50%] w-full">
        <Image
            src={textWithImage.image.url}
            width={textWithImage.image.width}
            height={textWithImage.image.height}
            class={`rounded-2xl shadow-sm ${imageSize()} object-cover`}
            alt=""
        />
    </div>
</div>