<template>
  <header class="masthead">
    <div class="masthead-main">
      <div>
        <h1 class="masthead-title">{{ competitionTitle }}</h1>
        <p class="masthead-subtitle">{{ t('subtitle') }}</p>
      </div>

      <div class="masthead-controls">
        <div class="controls-grid">
          <div class="control-box">
            <p class="control-label">{{ t('labels.mode') }}</p>
            <div class="language-switcher mode-switcher">
              <button class="lang-btn" :class="{ active: mode === 'view' }" @click="$emit('change-mode', 'view')">{{ t('viewMode') }}</button>
              <button class="lang-btn" :class="{ active: mode === 'admin' }" @click="$emit('change-mode', 'admin')">{{ t('adminMode') }}</button>
            </div>
          </div>

          <div class="control-box">
            <p class="control-label">{{ t('labels.language') }}</p>
            <div class="language-switcher">
              <button class="lang-btn" :class="{ active: language === 'ar' }" @click="$emit('change-language', 'ar')">العربية</button>
              <button class="lang-btn" :class="{ active: language === 'en' }" @click="$emit('change-language', 'en')">English</button>
            </div>
          </div>
        </div>
        <div class="status-row">
          <div class="live-badge">{{ mode === 'view' ? '● ' + t('labels.liveTracker') : t('adminPanel') }}</div>
          <div class="server-time" v-if="serverTime">{{ t('labels.lastSync') }}: {{ serverTime }}</div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
defineProps({
  t: { type: Function, required: true },
  competitionTitle: { type: String, required: true },
  mode: { type: String, required: true },
  language: { type: String, required: true },
  serverTime: { type: String, default: '' },
})

defineEmits(['change-mode', 'change-language'])
</script>

