<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("dashboard.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('dashboard.Proposals')"
        :value="user.proposals_count"
      />
      <CardAttribute
        :title="$t('dashboard.Total Received')"
        :value="currency(user.wallet.reserved_funds)"
      />
    </div>
    <div class="mt-[20px] space-y-4 p-[10px] w-full mx-auto bg-blue-200 rounded-[8px]">
      <CardAttribute
        :title="$t('projects.successful_jobs')"
        :value="user.successful_jobs"
      />
      <CardAttribute
        :title="$t('dashboard.service_requests')"
        :value="user.servicesOrders.length"
      />
    </div>
    <div class="mt-[20px] p-[10px] w-full mx-auto bg-blue-200 rounded-[8px]">
      <CardAttribute
        :title="$t('dashboard.Messages')"
        :value="user.chats_count"
      />
    </div>
  </div>
</template>
  <script>
import CardAttribute from "@/components/Dashboard/CardAttribute.vue";

export default {
  components: {
    CardAttribute,
  },
  props: {
    user: {},
  },
};
</script>
