<script lang='ts' setup>
import type { EaringsSummaryData } from "@/api/types";

defineProps<{
  data: EaringsSummaryData | null;
}>();

const { t } = useI18n();
</script>

<template>
  <div class="bg-text-900 rounded-xl p-7">
    <div>
      <div class="text-sm mb-2">
        {{ t("revenue.monthly.monthTotalRevenue") }}
      </div>
      <div class="text-4xl font-bold">
        {{ formatAmountWithSplit(data?.realized.thisMonth) }}
      </div>
      <div class="flex items-center gap-2 text-xs mt-1">
        <div>{{ t("revenue.monthly.yesterdayRevenue") }}</div>
        <div>+{{ formatAmountWithSplit(data?.realized.yesterday) }}</div>
      </div>
    </div>
    <div class="h-px bg-text-800 my-5" />
    <div class="flex justify-around">
      <div class="flex-col-center">
        <div class="text-base font-bold">
          {{ formatAmountWithSplit(data?.realized.lastMonth) }}
        </div>
        <div class="text-xs">
          {{ t("revenue.monthly.lastMonthRevenue") }}
        </div>
      </div>
      <div class="h-auto w-px bg-text-800" />
      <div class="flex-col-center">
        <div class="text-base font-bold">
          {{ formatAmountWithSplit(data?.unrealized.total) }}
        </div>
        <div class="text-xs">
          {{ t("revenue.monthly.totalRevenue") }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='css' scoped>
h4 {
  font-size: var(--title-font-size);
}
</style>
