---
import { Icon } from "astro-icon/components";

const { props } = Astro.props;
const textColor = props.textColor || ''

const imageUrl = props.image || ''
//const bgClass = props.type === 'text'? `bg-[${props.bgColor}]` : `bg-[url(${props.image})] bg-cover`
---
{props.type !== 'imgText' && (
    <div class="aspect-square overflow-hidden">
    <div class={`flex flex-col justify-center h-full bg-[${props.bgColor}]`}>
        { props.type === 'text' && (
            <div class="p-8 sm:p-16 md:p-8 xl:p-16 flex flex-col justify-between h-full">
                <Icon name={props.icon} class={`text-8xl text-[${textColor}] hidden lg:block`} />
                <p class={`text-[${textColor}]`}>{props.text}</p>
            </div>
        )}
        { props.type === 'image' && (
        <div class="object-cover aspect-square flex">
            <img class="w-full object-cover" src={props.image} alt="" />
        </div>
        )}
    </div>
</div>
)}

{ props.type === 'imgText' && (
    <div class={`flex flex-col justify-between h-full bg-[${props.bgColor}]`}>
        <div class="grid grid-cols-1 gap-0 p-8 font-bold">
            <div class="px-12 py-10">
                <Icon name={props.icon} class="text-3xl" />
                <p class="font-primary text-xl">{props.text}</p>
            </div>
                <div class="object-cover aspect-square flex">
                <img class="w-full h-auto object-cover" src={props.image} alt="" />
                </div>
        </div>
    </div>
)}