<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <h2 class="text-xl font-bold brand-section-title">Inventarios en Depósito</h2>
    </template>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <MetricCard
        label="Total qq Seco en Depósito"
        :value="metrics.totalQqSecoDeposito.value.toFixed(2)"
        unit="qq"
        variant="warning"
      />
      <MetricCard
        label="Total qq Mojado en Depósito"
        :value="metrics.totalQqMojadoDeposito.value.toFixed(2)"
        unit="qq"
        variant="info"
      />
      <MetricCard
        label="Total qq Oreado en Depósito"
        :value="metrics.totalQqOreadoDeposito.value.toFixed(2)"
        unit="qq"
        variant="info"
      />
      <MetricCard
        label="Total Lb Uva en Depósito"
        :value="metrics.totalLbUvaDeposito.value.toFixed(2)"
        unit="lb"
        variant="info"
      />
    </div>
  </UCard>
</template>

<script setup lang="ts">
import type { IngresosMetrics } from '~/composables/useIngresosMetrics'

defineProps<{
  metrics: IngresosMetrics
}>()
</script>