<script setup>
import { TrashIcon } from "@heroicons/vue/24/outline";
import { useForm } from "@inertiajs/vue3";

// creates form to send SelectedFiles Request
const form = useForm({
    parent_id: null,
    all: null,
    Ids: [],
});

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

// define delete function
const onClick = () => {
    form.all = props.wipeall;
    form.Ids = props.selected;

    form.delete(route("file.delete"));
};
</script>

<template>
    <button
        @click="onClick()"
        class="border-gray-700 border px-3 py-2 rounded hover:bg-red-600 hover:border-red-600 flex items-center justify-center gap-2"
    >
        <TrashIcon class="h-5 w-5" aria-hidden="true" /> Delete
    </button>
</template>
