<script setup>
defineProps({
    icon: String,
    label: String,
    unlocked: { type: Boolean, default: false },
    tok: { type: Object, required: true },
});
</script>

<template>
    <div style="display:flex;flex-direction:column;align-items:center;gap:5px;">
        <div :style="{
            width: '46px', height: '46px', borderRadius: '50%',
            background: unlocked ? tok.light : tok.bgAlt,
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '20px',
            filter: unlocked ? 'none' : 'grayscale(1) opacity(0.35)',
            border: '2px solid ' + (unlocked ? tok.primary : tok.border),
        }">{{ icon }}</div>
        <span :style="{ fontSize: '9px', color: tok.muted, textAlign: 'center', lineHeight: 1.2, maxWidth: '52px' }">{{ label }}</span>
    </div>
</template>
