<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const props = defineProps<{
  item: any
}>();

const route = useRoute();
const isFolder = computed(() => props.item.type === 'folder');

const targetUrl = computed(() => {
  if (isFolder.value) {
    const currentSlug = route.params.slug ? (Array.isArray(route.params.slug) ? route.params.slug.join('/') : route.params.slug) : '';
    return currentSlug ? `/${currentSlug}/${props.item.slug}` : `/${props.item.slug}`;
  }
  return props.item.url;
});

const defaultIcon = computed(() => isFolder.value ? 'i-lucide-folder' : 'i-lucide-link');
const iconToUse = computed(() => props.item.icon || defaultIcon.value);

</script>

<template>
  <NuxtLink
    :to="targetUrl"
    :target="isFolder ? '_self' : '_blank'"
    class="flex flex-col items-center justify-center p-5 rounded-2xl bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/10 transition-all cursor-pointer group select-none shadow-lg hover:shadow-xl "
  >
    <UIcon 
      :name="iconToUse" 
      class="w-20 h-20 mb-3 drop-shadow-lg transition-transform group-hover:scale-110" 
      :style="{ color: item.color || (isFolder ? '#60A5FA' : '#9CA3AF') }"
    />
    <span class="text-sm font-medium text-center text-white break-words line-clamp-2 w-full text-shadow">
      {{ isFolder ? item.name : item.title }}
    </span>
  </NuxtLink>
</template>

<style scoped>
.text-shadow {
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
</style>
