≈---
const { props } = Astro.props;
import { Icon } from "astro-icon/components";
import Button from "./ui/Button.astro";

const background = props.bgImage || props.bgColor;

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

     <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">
            <Button class="px-6 py-3 uppercase" url="#" variant="primary" title={props.buttonLabel} />
        </div>
    )}

    {props.hasInput && (
        <div class="flex border gap-2 w-full">
            <input type="email" placeholder="Correo" class="flex-1 p-2 min-w-0 outline-none"/>
            <Button class="px-6 py-3 uppercase" variant="secondary" title={props.buttonLabel} />
        </div>
    )}
    </div>
</div>