<!-- src/pages/customer/profile/profile/CustomerStats.vue -->
<template>
  <div class="card-glass">
    <div class="card-body p-4 sm:p-6">
      <h2 class="card-title flex items-center gap-2">
        <div class="w-8 h-8 rounded-lg bg-info/10 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 text-info">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
          </svg>
        </div>
        Stats
      </h2>
      <div class="text-sm mt-2 space-y-1">
        <div class="flex justify-between"><span>Total Deliveries:</span> <strong>{{ stats.oil_deliveries }}</strong></div>
        <div class="flex justify-between"><span>Total Gallons:</span> <strong>{{ stats.oil_total_gallons }}</strong></div>
        <div class="flex justify-between"><span>Total Service Calls:</span> <strong>{{ stats.total_calls }}</strong></div>
        <div class="flex justify-between"><span>Last Delivery:</span> <strong>{{ last_delivery || 'N/A' }}</strong></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  stats: { type: Object, required: true },
  last_delivery: { type: String, default: '' },
});
</script>