<template>
    <div class="bs-card">
        <div class="bs-card-content">
            <div class="bs-font-medium-4-semi-bold bs-card-title">
                {{ title }}
                <BsInfoTooltip :text="infoText" v-if="infoText"></BsInfoTooltip>
            </div>
            <div class="separator"></div>
            <slot name="content">
                <div
                    v-for="[key, value] of Object.entries(items)"
                    :key="key"
                    class="bs-item-row"
                >
                    <div class="bs-font-medium-3-normal bs-item-label">
                        {{ key }}

                        <div v-if="subItems && subItems[key]">
                            {{ Object.keys(subItems[key])[0] }}
                            <BsInfoTooltip
                                :text="subItems[key].infoText"
                                v-if="subItems[key].infoText"
                            ></BsInfoTooltip>
                        </div>
                    </div>
                    <div class="bs-font-medium-3-semi-bold bs-item-value">
                        {{ value }}
                        <div
                            v-if="subItems && subItems[key]"
                            class="bs-item-icon"
                            :class="subItems[key].color"
                        >
                            <BsIcon
                                :name="subItems[key].icon"
                                v-if="subItems[key].icon"
                                :color="subItems[key].color"
                            ></BsIcon>
                            {{ Object.values(subItems[key])[0] }}
                        </div>
                    </div>
                </div>
            </slot>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import BsInfoTooltip from "./BsInfoTooltip.vue";

export default defineComponent({
    name: "BsCard",
    props: {
        title: {
            type: String,
            required: true,
        },
        items: {
            type: Object,
            required: true,
        },
        subItems: {
            type: Object,
            default: undefined,
        },
        infoText: {
            type: String,
            default: undefined,
        },
    },
    components: { BsInfoTooltip },
});
</script>

<style scoped>
.bs-card {
    border-radius: 4px;
    border: 1px solid #5b5b5b;
    border-left-width: 4px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 218px;
    gap: 8px;
    padding: 0 12px;
    color: #333e48;
    height: 100%;
}

.bs-card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
}

.bs-card-title {
    width: 100%;
    color: var(--text-and-icons-bs-color-text, #333e48);
    text-align: center;
}

.separator {
    height: 1px;
    background: var(--base-colors-bs-color-border-light, #e5e5e5);
    width: 100%;
    margin: 8px 0;
    justify-self: center;
    align-self: center;
    justify-content: space-between;
}

.bs-item-row {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.bs-item-label,
.bs-item-value {
    /* flex: 1; */
    color: var(--text-and-icons-bs-color-text, #333e48);
}
.bs-item-value {
    text-align: end;
    color: var(--text-and-icons-bs-color-text, #333e48);
}
.bs-item-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}
</style>
