<script setup>
import { ShareIcon } from "@heroicons/vue/24/outline";
import ShareFilesModal from "./ShareFilesModal.vue";
import { ref } from "vue";

// define props
const props = defineProps({
    shareall: {
        type: Boolean,
        default: false,
        required: false,
    },
    selected: {
        type: Array,
        required: false,
    },
});

const shareFilesModalActive = ref(false);

const toggleShareFilesModal = (bool) => {
    shareFilesModalActive.value = bool;
};
</script>

<template>
    <button
        @click="toggleShareFilesModal(true)"
        class="border-gray-700 border px-3 py-2 rounded hover:bg-teal-600 hover:border-teal-600 flex flex justify-center items-center gap-2"
    >
        <ShareIcon class="h-5 w-5" aria-hidden="true" /> Share
    </button>
    <ShareFilesModal
        v-model="shareFilesModalActive"
        @close="toggleShareFilesModal(false)"
        :shareall="shareall"
        :selected="selected"
    />
</template>
