<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <h2 class="text-xl font-bold brand-section-title">Secos Vendidos y Pérdidas</h2>
    </template>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <MetricCard
        label="Total QQ Secos por Vender"
        :value="metrics.totalQqSecoPorVender.value.toFixed(2)"
        unit="QQ"
        variant="info"
      />
      <MetricCard
        label="Precio de Venta Promedio por QQ"
        :value="formatCurrency(metrics.precioVentaPromedioPorQq.value)"
      />
      <MetricCard
        label="Precio de Compra Promedio por QQ"
        :value="formatCurrency(metrics.precioCompraPromedioPorQq.value)"
      />
      <MetricCard
        label="Margen de Ganancia por QQ"
        :value="formatCurrency(metrics.margenGananciaPorQq.value)"
        :variant="metrics.margenGananciaPorQq.value > 0 ? 'success' : 'danger'"
      />
    </div>
  </UCard>
</template>

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

defineProps<{
  metrics: IngresosMetrics
}>()

const formatCurrency = (value: number) => {
  return new Intl.NumberFormat('es-HN', {
    style: 'currency',
    currency: 'HNL',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value).replace('HNL', 'L')
}
</script>