<script setup>
defineProps({
    icon: { type: String, required: true },
    titulo: { type: String, required: true },
    descricao: { type: String, default: '' },
    to: { type: [String, Object], default: null },
    requiresAuth: { type: Boolean, default: false },
})

const cardClasses = 'group flex flex-col gap-3 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 p-5 hover:border-primary/40 dark:hover:border-primary/50 hover:shadow-md transition-all duration-200 cursor-pointer'
</script>

<template>
    <NuxtLink v-if="to" :to="to" :class="cardClasses">
        <div class="flex items-start justify-between">
            <div class="w-10 h-10 bg-primary/8 dark:bg-primary/15 rounded-lg flex items-center justify-center group-hover:bg-primary/15 dark:group-hover:bg-primary/25 transition-colors">
                <i :class="['pi', icon, 'text-primary text-lg']" />
            </div>
            <i v-if="requiresAuth" class="pi pi-lock text-slate-300 dark:text-slate-600 text-xs" title="Requer login" />
        </div>
        <div>
            <p class="font-semibold text-slate-800 dark:text-slate-100 text-sm group-hover:text-primary transition-colors">{{ titulo }}</p>
            <p v-if="descricao" class="text-xs text-slate-500 dark:text-slate-400 mt-1 leading-relaxed">{{ descricao }}</p>
        </div>
        <div class="flex items-center gap-1 text-xs text-primary font-medium opacity-0 group-hover:opacity-100 transition-opacity">
            <span>Acessar</span>
            <i class="pi pi-arrow-right text-xs" />
        </div>
    </NuxtLink>

    <div v-else :class="cardClasses">
        <div class="flex items-start justify-between">
            <div class="w-10 h-10 bg-primary/8 dark:bg-primary/15 rounded-lg flex items-center justify-center group-hover:bg-primary/15 dark:group-hover:bg-primary/25 transition-colors">
                <i :class="['pi', icon, 'text-primary text-lg']" />
            </div>
            <i v-if="requiresAuth" class="pi pi-lock text-slate-300 dark:text-slate-600 text-xs" title="Requer login" />
        </div>
        <div>
            <p class="font-semibold text-slate-800 dark:text-slate-100 text-sm">{{ titulo }}</p>
            <p v-if="descricao" class="text-xs text-slate-500 dark:text-slate-400 mt-1 leading-relaxed">{{ descricao }}</p>
        </div>
    </div>
</template>
