<template>
    <div
        class="px-[20px] bg-white py-5 md:w-64 lg:w-80 rounded-2xl w-full mx-auto"
    >
        <h1
            class="mt-[10px] font-inter normal font-medium text-[18px] leading-[22px]"
        >
            {{ $t("Register.quick_stats") }}
        </h1>
        <hr class="max-w-[80] mt-[20px] mb-[20px]" />
        <div
            class="p-[10px] w-full bg-blue-200 rounded-[8px] space-y-4 mx-auto"
        >
            <CardAttribute
                :title="$t('Register.total_projects')"
                :value="user.projects_count"
            />
            <CardAttribute
                :title="$t('Register.total_spent')"
                :value="currency(user.wallet.total_spent)"
            />
        </div>
        <div
            class="mt-[20px] space-y-4 p-[10px] w-full mx-auto bg-blue-200 rounded-[8px]"
        >
            <CardAttribute
                :title="$t('Register.received_proposals')"
                :value="user.proposal_count"
            />
            <CardAttribute
                :title="$t('Register.messages')"
                :value="user.chats_count"
            />
        </div>
        <div
            class="mt-[20px] p-[10px] w-full mx-auto bg-blue-200 rounded-[8px]"
        >
            <CardAttribute
                :title="$t('Register.service_requested')"
                :value="user.service_orders_count"
            />
        </div>
    </div>
</template>
<script>
import CardAttribute from "@/components/Dashboard/CardAttribute.vue";
export default {
    props: {
        user: {},
    },
    components: {
        CardAttribute,
    },
};
</script>
