<!-- src/pages/customer/profile/profile/AutomaticDeliveries.vue -->
<template>
  <div>
    <div class="overflow-x-auto bg-base-100 rounded-lg mx-4 mb-4 mt-4">
        <table class="table table-sm w-full">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Gallons</th>
              <th>Date</th>
              <th>View</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="autoticket in deliveries" :key="autoticket.id" class="hover">
              <td>{{ autoticket.id }}</td>
              <td>{{ autoticket.customer_full_name }}</td>
              <td>{{ autoticket.gallons_delivered }}</td>
              <td>{{ autoticket.fill_date }}</td>
              <td>
                <router-link :to="{ name: 'automaticView', params: { id: autoticket.id } }">
                  <button class="btn btn-xs btn-primary">View</button>
                </router-link>
                 
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
</template>

<script setup lang="ts">
// 1. Define the AutomaticDelivery interface
interface AutomaticDelivery {
  id: number;
  customer_full_name: string;
  gallons_delivered: number | string;
  auto_status: number | string;
  open_ticket_id: number | string;
  fill_date: string;
}

// 2. Define Props using the interface
interface Props {
  deliveries: AutomaticDelivery[];
}

// 3. Use the typed defineProps
defineProps<Props>();
</script>
