@props(['conversation'])

<x-basics.dropdown align="right" width="w-56" :closeOnClick="true">
    <x-slot name="trigger">
        <button type="button" class="p-2 rounded hover:bg-gray-100" aria-label="Open menu">
            <i class="ph ph-dots-three-outline-vertical text-xl"></i>
        </button>
    </x-slot>

    <x-slot name="content">

        <!-- Archive Conversation -->
        <x-basics.dropdown-item icon="ph ph-check-circle" variant="secondary">
            Actualiser la conversation
        </x-basics.dropdown-item>

        <!-- Delete Conversation -->
        <x-basics.dropdown-item icon="ph ph-trash" variant="danger">
            Supprimer la conversation
        </x-basics.dropdown-item>

        <!-- Divider -->
        <div class="border-t border-gray-100"></div>

        <!-- Export Messages -->
        <x-basics.dropdown-item icon="ph ph-download">
            Exporter les messages
        </x-basics.dropdown-item>

        <!-- View Details -->
        <x-basics.dropdown-item icon="ph ph-info">
            Voir les détails
        </x-basics.dropdown-item>
    </x-slot>
</x-basics.dropdown>
