<script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area';
import type { DirectoryEntry } from '#shared/types';

const { entries, isOverDropZone } = defineProps<{
    entries: DirectoryEntry[];
    isOverDropZone?: boolean;
}>();

const { isLoading } = useLoadingIndicator();

const sortedEntries = computed(() =>
    entries.toSorted((a, b) => a.name.localeCompare(b.name))
);
</script>

<template>
    <ScrollArea class="h-full w-full">
        <div
            v-if="isOverDropZone"
            class="bg-background/50 pointer-events-none absolute flex h-full w-full items-center justify-center"
        >
            <Icon class="size-16 animate-pulse" name="lucide:upload" />
        </div>
        <div class="flex flex-row flex-wrap gap-2">
            <DirectoryEntry
                v-for="entry in sortedEntries"
                :key="entry.name"
                :entry="entry"
                :disabled="isLoading"
            />
        </div>
    </ScrollArea>
</template>
