---
const { props } = Astro.props;
import { Icon } from "astro-icon/components";
import Button from "./ui/Button.astro";
import Modal from "./Modal.astro";
const background = props.bgImage || props.bgColor;

---
<div style={{ background: props.bgImage ? `url('${props.bgImage}') center no-repeat; background-size:contain;` : props.bgColor }} class={`aspect-auto xl:aspect-square py-8 px-8 xl:px-16 flex flex-col justify-evenl`}>

     <div class="flex flex-col gap-6">
        {props.hasIcon && (
        <div class="flex justify-start">
            <Icon name="ph:minus" class={`w-12 h-12 ${props.titleColor}`} />
        </div>
    )}
        <h2 class={`${props.titleColor} font-bold ${props.sizeTitle} `}>{props.title}</h2>
        <p class={`${props.textColor} ${props.sizeText}`}>{props.copy}</p>
     </div>
    
    
    {props.hasButton && (
        <div class=" flex self-start mt-3">
            <Button class="px-6 py-3 uppercase" url={props.url} variant="primary" title={props.buttonLabel} />
        </div>
    )}

    {props.hasInput && (
        <div class="flex gap-2 w-full mt-5">
           <Modal />
        </div>
    )}
    </div>
</div>