<script setup>
import DeliveryInteractive from "@/components/dashboard/DeliveryInteractive.vue";
import Driver from "@/components/dashboard/Driver.vue";

const drivers = [
  {
    name: "Nguyễn Văn A",
    status: "Đang giao",
    deliveries: 3,
    deliveries_completed: 2,
  },
  {
    name: "Trần Văn B",
    status: "Đang giao",
    deliveries: 2,
    deliveries_completed: 1,
  },
  {
    name: "Lê Thị C",
    status: "Hoàn thành",
    deliveries: 4,
    deliveries_completed: 4,
  },
  {
    name: "Phạm Văn D",
    status: "Đang giao",
    deliveries: 1,
    deliveries_completed: 0,
  },
];
</script>
<template>
  <div class="card">
    <div class="card-content">
      <p class="fs-17 font-semibold mb-4">Giao nhận & Tài xế</p>
      <div class="fixed-grid has-1-cols-mobile has-3-cols">
        <div class="grid">
          <div class="cell is-col-span-2">
            <div>
              <DeliveryInteractive />
            </div>
          </div>
          <div class="cell is-flex is-flex-direction-column is-gap-2">
            <Driver
              v-for="driver in drivers"
              :key="driver.name"
              v-bind="driver"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
