<template>
    <div class="card-01-wrapper">
        <div class="card-01-header">
            <van-icon style="margin-right: 5px;" :name="props.icon" color="#1989fa" size="1.3rem" />
            <span>{{ props.title }}</span>
        </div>
        <div v-if="props.description" class="card-01-description" v-html="props.description"></div>
    </div>
</template>
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    icon: {
        type: String,
        default: ''
    },
    title: {
        type: String,
        default: ''
    },
    description: {
        type: String,
        default: ''
    }
})

</script>
<style lang="scss" scoped>
.card-01-wrapper {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;

    .card-01-header {
        display: flex;
        flex-direction: row;
        align-items: center;

        span {
            font-size: 1rem;
            color: #303133;
            font-weight: bold;
        }

    }

    .card-01-description {
        font-size: 0.9rem;
        color:#A8ABB2;
        margin-top: 10px;
    }

    &:last-child {
        margin-bottom: 20px;
    }
}
</style>