<template>
    <section
        class="relative flex flex-col items-start justify-between w-full gap-16 sm:px-16 md:flex-col-reverse lg:items-center xl:gap-32 lg:px-0"
        :class="invert ? 'lg:flex-row-reverse ' : 'lg:flex-row'"
    >
        <div class="lg:max-w-[480px] max-w-full flex-1 h-[500px] rounded-lg">
            <img class="object-contain w-full h-full" :src="img" :alt="title" />
        </div>
        <div
            class="flex flex-col items-start justify-start text-start lg:max-w-[500px] max-w-full overflow-hidden flex-1"
        >
            <h3
                class="w-full mb-2 text-[32px] lg:text-5xl font-semibold text-gray-300 overflow-ellipsis"
            >
                {{ title }}
            </h3>
            <h4
                class="w-full mb-4 text-xl font-semibold lg:text-3xl text-gray-300/75 overflow-ellipsis"
            >
                {{ subtitle }}
            </h4>
            <p
                v-if="content"
                class="w-full text-sm font-medium text-gray-300/50 mb-7 overflow-ellipsis lg:text-base"
            >
                {{ content }}
            </p>
            <div>
                <Button :href="ctaLink" size="md"> {{ ctaText }} </Button>
            </div>
        </div>
    </section>
</template>

<script>
import Button from "@/Jetstream/Button.vue";
export default {
    props: {
        title: {
            type: String,
            required: true,
        },
        subtitle: {
            type: String,
            required: true,
        },
        content: {
            type: String,
        },
        img: {
            type: String,
            required: true,
        },
        ctaText: {
            type: String,
            required: true,
        },
        ctaLink: {
            type: String,
            required: true,
        },
        invert: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        Button,
    },
};
</script>
