<template>
    <div class="card card-bg px-0 shadow-lg border-0" style="width: 18rem;">

        <img :src="item.image" :alt="item.title" class="card-img-top" width="100%" height="100%">
        <div class="card-body my-3 d-flex flex-column justify-content-between">
            <h3>{{ item.title }}</h3>
            <div class="d-flex justify-content-center">
                <NuxtLink :to="'/contacto?message='+encodeURIComponent(item.title)" class="btn-contact mt-3">
                    <span>Más información</span>
                    <i class="bi bi-arrow-right-circle"></i>
                </NuxtLink>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">


interface Props {
    item: {title: string, image: string}
}

const props = defineProps<Props>();


</script>

<style scoped lang="scss">

.card-bg {
    background: rgba($color: #202A34, $alpha: 0.5);
    h3 {
        font-size: 17px;
        color: white;
    }
    .btn-contact {
        border: 1px solid #ccc;
        padding: 5px 10px;
        border-radius: 20px;
        text-decoration: none;
        color: #fff;
        text-align: center;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        transition: all 300ms ease;


        &:hover {
            cursor: pointer;
            background: #B4590A;
        }
    }
}
</style>