<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import EscalationBanner from './components/EscalationBanner.vue'

const { t, locale } = useI18n()

function toggleLocale() {
  const next = locale.value === 'ru' ? 'en' : 'ru'
  locale.value = next
  localStorage.setItem('kin-locale', next)
}
</script>

<template>
  <div class="min-h-screen">
    <header class="border-b border-gray-800 px-6 py-4 flex items-center justify-between">
      <router-link to="/" class="text-lg font-bold text-gray-100 hover:text-white no-underline">
        Kin
      </router-link>
      <nav class="flex items-center gap-4">
        <EscalationBanner />
        <button
          @click="toggleLocale"
          class="text-xs text-gray-400 hover:text-gray-200 px-2 py-0.5 border border-gray-700 rounded hover:border-gray-500 transition-colors"
        >{{ locale === 'ru' ? 'EN' : 'RU' }}</button>
        <router-link to="/settings" class="text-xs text-gray-400 hover:text-gray-200 no-underline">{{ t('common.settings') }}</router-link>
        <span class="text-xs text-gray-600">{{ t('common.subtitle') }}</span>
      </nav>
    </header>
    <main class="px-6 py-6">
      <router-view />
    </main>
  </div>
</template>
