<template>
  <div class="d-sm-flex justify-content-between">
    <div>
      <soft-button color="success" variant="gradient" @click="$emit('create')">
        Nouveau Devis
      </soft-button>
    </div>
    <div class="d-flex">
      <div class="dropdown d-inline">
        <soft-button
          id="navbarDropdownMenuLink2"
          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="navbarDropdownMenuLink2"
        >
          <li>
            <a
              class="dropdown-item border-radius-md"
              href="javascript:;"
              @click="$emit('filter', 'envoye')"
            >
              Statut: Envoyé
            </a>
          </li>
          <li>
            <a
              class="dropdown-item border-radius-md"
              href="javascript:;"
              @click="$emit('filter', 'accepte')"
            >
              Statut: Accepté
            </a>
          </li>
          <li>
            <a
              class="dropdown-item border-radius-md"
              href="javascript:;"
              @click="$emit('filter', 'brouillon')"
            >
              Statut: Brouillon
            </a>
          </li>
          <li>
            <a
              class="dropdown-item border-radius-md"
              href="javascript:;"
              @click="$emit('filter', 'refuse')"
            >
              Statut: Refusé
            </a>
          </li>
          <li>
            <hr class="horizontal dark my-2" />
          </li>
          <li>
            <a
              class="dropdown-item border-radius-md text-danger"
              href="javascript:;"
              @click="$emit('filter', null)"
            >
              Retirer Filtres
            </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";

const emit = defineEmits(["create", "filter", "export"]);
</script>
