<template>
    <div class="stats-card">
        <div class="card " :style="'background:' + background + ';border-color:' +  border">
            <div class="card-body" style="padding-right: 0px;padding-left: 0px;">
                <div class="row" style="padding-right: 20px;padding-left: 20px;">
                    <div class="col">
                        <div><span :style="'color:' + color"><strong>{{title}}</strong></span></div>
                        <div><span :style="'color:' + color">{{valueStat}}</span></div>
                    </div>
                    <div class="col-auto"><i :class="ico" :style="styleIcon + ' color:' + color" ></i></div>
                </div>
                <hr class="d-block">
                <div class="row" style="padding-right: 20px;padding-left: 20px;">
                    <div class="col">
                        <div>
                            <router-link :to="url" :style="'color:' + color">
                                <strong>view details</strong><br>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'StatsCard',
    props:{
        title: { type: String, default: '' },
        ico: { type: String, default: 'fa fa-search fa-2x' },
        valueStat: { type: Number, default: '' },
        url: { type: Number, default: '' },
        background: { type: String, default: '#6eabc2' },
        border:{ type: String, default: '#6eabc2' },
        color: { type: String, default: '#ffffff' },
        styleIcon: { type: String, default: '' },
    }
}
</script>
<style>
.stats-card{
    padding: 5px;
}

</style>
