<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <h2 class="text-xl font-bold brand-section-title">Precios Promedio Ponderados</h2>
    </template>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <MetricCard
        label="Precio Promedio Ponderado Uva"
        :value="formatNumber(metrics.precioPromedioUvaPorQqLb.value)"
        unit="L./lb"
      />
      <MetricCard
        label="Precio Promedio Ponderado Oreado"
        :value="formatNumber(metrics.precioPromedioOreadoPorQq.value)"
        unit="L./qq"
      />
      <MetricCard
        label="Precio Promedio Ponderado Mojado"
        :value="formatNumber(metrics.precioPromedioMojadoPorQq.value)"
        unit="L./qq"
      />
    </div>
  </UCard>
</template>

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

defineProps<{
  metrics: IngresosMetrics
}>()

const formatNumber = (value: number) => {
  return value.toLocaleString('en-US', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}
</script>
