<script setup>
import { RouterLink } from 'vue-router';
import { getLang } from '../utils/config';
</script>

<template>
    <section class="no-print communication-shell">
        <div class="communication-head">
            <RouterLink class="communication-brand" :to="{ name: 'communication.chat' }">
                <i class="fa fa-comments"></i> {{ getLang('module_name', 'Communication') }}
            </RouterLink>
        </div>
        <div class="communication-tabs">
            <RouterLink
                class="communication-tab"
                :class="{ active: $route.name === 'communication.chat' }"
                :to="{ name: 'communication.chat' }"
            >
                {{ getLang('chat') }}
            </RouterLink>
            <RouterLink
                class="communication-tab"
                :class="{ active: $route.name === 'communication.meetings' }"
                :to="{ name: 'communication.meetings' }"
            >
                {{ getLang('meetings') }}
            </RouterLink>
        </div>
    </section>
</template>

<style scoped>
.communication-shell {
    margin-bottom: 18px;
    border: 1px solid #e7ecf3;
    border-radius: 14px;
    background: linear-gradient(120deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: 0 8px 24px rgba(27, 39, 51, 0.06);
}
.communication-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 6px;
}
.communication-brand {
    font-size: 18px;
    font-weight: 600;
    color: #1e2b37;
    text-decoration: none;
}
.communication-brand i {
    margin-right: 6px;
    color: #4f7cff;
}
.communication-tabs {
    display: flex;
    gap: 10px;
    padding: 0 18px 14px;
}
.communication-tab {
    display: inline-block;
    border-radius: 999px;
    padding: 8px 16px;
    color: #4a5b6f;
    background: #eef2f8;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
}
.communication-tab:hover {
    background: #dde6f7;
    color: #243447;
}
.communication-tab.active {
    color: #fff;
    background: linear-gradient(90deg, #4f7cff 0%, #5ea6ff 100%);
    box-shadow: 0 5px 14px rgba(79, 124, 255, 0.35);
}
</style>
