<script setup lang="ts">
defineProps<{
    name?: string
}>()
</script>

<template>
    <div class="private-panel glass glass-border">
        <span class="private-icon mdi mdi-lock-outline"></span>
        <span class="private-title">PRIVATE PROFILE</span>
        <span class="private-sub">{{ name ? `${name}'s profile is private. You can request to follow them for access.` : 'This profile is private' }}</span>
    </div>
</template>

<style scoped>
.private-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 4rem 2rem;
}

.private-icon {
    font-size: 1.6rem;
    color: #556;
    margin-bottom: 0.2rem;
}

.private-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: #778899;
}

.private-sub {
    font-family: 'Barlow', sans-serif;
    font-size: 0.82rem;
    color: #445;
}
</style>
