<template>
  <div class="d-sm-flex justify-content-between align-items-center gap-3">
    <div>
      <h5 class="mb-1">Commandes sous-traitants</h5>
      <p class="text-sm text-secondary mb-0">
        Liste des devis associés à un sous-traitant.
      </p>
    </div>

    <div class="d-flex">
      <div class="dropdown d-inline">
        <soft-button
          id="sousTraitantCommandeFilter"
          color="dark"
          variant="outline"
          class="dropdown-toggle"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          Filtrer
        </soft-button>
        <ul
          class="dropdown-menu dropdown-menu-lg-start px-2 py-3"
          aria-labelledby="sousTraitantCommandeFilter"
        >
          <li v-for="option in filterOptions" :key="option.value ?? 'all'">
            <a
              class="dropdown-item border-radius-md"
              :class="{ 'text-danger': option.value === null }"
              href="javascript:;"
              @click="$emit('filter', option.value)"
            >
              {{ option.label }}
            </a>
          </li>
        </ul>
      </div>

      <soft-button
        class="btn-icon ms-2 export"
        color="dark"
        variant="outline"
        data-type="csv"
        @click="$emit('export')"
      >
        <span class="btn-inner--icon">
          <i class="ni ni-archive-2"></i>
        </span>
        <span class="btn-inner--text">Export CSV</span>
      </soft-button>
    </div>
  </div>
</template>

<script setup>
import { defineEmits } from "vue";
import SoftButton from "@/components/SoftButton.vue";

defineEmits(["filter", "export"]);

const filterOptions = [
  { label: "Statut: Envoye", value: "envoye" },
  { label: "Statut: Accepte", value: "accepte" },
  { label: "Statut: Brouillon", value: "brouillon" },
  { label: "Statut: Refuse", value: "refuse" },
  { label: "Retirer Filtres", value: null },
];
</script>
