<script lang="ts" setup>
import type { DirectoryEntry } from '~/shared/types';

const { entry } = defineProps<{
    entry: DirectoryEntry;
}>();

const route = useRoute();
const warrenStore = useWarrenStore();
</script>

<template>
    <div class="flex flex-row items-center">
        <Icon
            v-if="
                entry.fileType !== 'file' ||
                entry.mimeType == null ||
                !entry.mimeType.startsWith('image/')
            "
            class="size-6"
            :name="
                entry.fileType === 'file'
                    ? getFileIcon(entry.mimeType)
                    : 'lucide:folder'
            "
        />
        <object
            v-else-if="warrenStore.current != null"
            :type="entry.mimeType"
            class="size-6 object-cover"
            width="24"
            height="24"
            :data="
                route.meta.layout === 'share'
                    ? getApiUrl(
                          `warrens/files/cat_share?shareId=${route.query.id}&paths=${joinPaths(warrenStore.current.path, entry.name)}`
                      )
                    : getApiUrl(
                          `warrens/files/cat?warrenId=${warrenStore.current!.warrenId}&paths=${joinPaths(warrenStore.current.path, entry.name)}`
                      )
            "
        >
            <Icon class="size-6" :name="getFileIcon(entry.mimeType)" />
        </object>
        <Icon v-else class="size-6" :name="getFileIcon(entry.mimeType)" />
    </div>
</template>
