<!-- Card component -->
<script setup lang="ts">
// Props with default values
const {
    imageUrl,
    imageAlt,
    type = 'horizontal',
} = defineProps<{
    imageUrl: string;
    imageAlt: string;
    type?: 'vertical' | 'horizontal';
}>();
</script>

<template>
    <!-- Card -->
    <div
        :class="[
            'flex items-center gap-5 px-4 py-3 bg-info-50 border border-info-100 rounded-lg',
            type === 'vertical' && 'flex-col px-6 py-6',
            type === 'horizontal' && 'flex-col sm:flex-row',
        ]"
    >
        <!-- Image -->
        <img
            :class="[
                'rounded border border-primary-200',
                type === 'vertical' && 'w-full',
                type === 'horizontal' && 'max-sm:w-full',
            ]"
            :src="imageUrl"
            :alt="imageAlt"
        />

        <!-- Content -->
        <slot></slot>
    </div>
    <!-- Card -->
</template>

<style scoped></style>
