<template>
  <UCard class="brand-card border border-transparent">
    <template #header>
      <div class="flex items-center justify-between">
        <h2 class="text-xl font-bold brand-section-title">Rechazos y Subproductos</h2>
        <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-2">
          <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Rechazos</div>
          <div class="text-2xl font-bold text-[var(--brand-text)]">{{ formatCurrency(totalRechazos.value) }}</div>
        </div>
      </div>
    </template>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <RechazosRechazoCard
        title="Chibolita"
        :metrics="metrics.chibolita"
        unidad="libras"
        color="blue"
      />
      <RechazosRechazoCard
        title="Perico"
        :metrics="metrics.perico"
        unidad="libras"
        color="green"
      />
      <RechazosRechazoCard
        title="Vano"
        :metrics="metrics.vano"
        unidad="galones"
        color="yellow"
      />
      <RechazosRechazoCard
        title="Picadillo"
        :metrics="metrics.picadillo"
        unidad="galones"
        color="red"
      />
      <RechazosRechazoCard
        title="Magalla"
        :metrics="metrics.magalla"
        unidad="galones"
        color="purple"
      />
      <RechazosRechazoCard
        title="Pinta"
        :metrics="metrics.pinta"
        unidad="libras"
        color="pink"
      />
    </div>
  </UCard>
</template>

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

const props = defineProps<{
  metrics: RechazosMetrics
}>()

const totalRechazos = computed(() => props.metrics.totalRechazos)

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