
<template>
    <div class="col">
        <router-link v-if="hasUrl" :to="url">
        <div class="card infocard-theme">
            <div class="card-body card-body-height">
                <h4 v-if="hasUrl" class="card-title card-title-font">
                    <i class="card-icon" :class="icon" :style="styleIcon"></i>
                    {{title}}
                </h4>
                <p class="card-text">{{text}}</p>
            </div>
        </div>
        </router-link>
        <div v-else class="card infocard-theme">
            <div class="card-body card-body-height">
                <h4 v-if="hasUrl" class="card-title card-title-font">
                    <i class="card-icon" :class="icon" :style="styleIcon"></i>
                    {{title}}
                </h4>
                <p class="card-text">{{text}}</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import '@/assets/bootstrap/css/bootstrap.min.css';
export default{
    name: 'InformationCard',
    props: {
        title: String,
        text: String,
        icon: String,
        hasUrl: { type: Boolean, default: false},
        url: String,
        styleIcon: String,
    }
}
</script>
<style scoped>
.card-row
{
    padding-bottom: 20px;
}
.card-body-height
{
    height: var(--card-height);;
}
.card-title-font{
    font-weight: bold;
    font-size: var(--card-title-font-size);
}
.card-icon{
    font-size: 24px;
    padding-right: 4px;
}
.card-text{
    font-size: var(--card-text-font-size);
}

a:link {
    color: var(--card-text-color);
    text-decoration: none;
}

a:visited {
    color: var(--card-text-color);
}

a:hover {
    color: var(--card-text-color);
}

a:active {
    color: var(--card-text-color);
}
</style>
