<script setup>
import { useI18n } from 'vue-i18n'
import TeamCard from './TeamCard.vue'
import Leaderboard from './Leaderboard.vue'

const { locale } = useI18n({ useScope: 'global' })
const L = (zh, en) => (locale.value === 'zh-CN' ? zh : en)
</script>

<template>
  <div class="tab-team block--two">
    <div>
      <h2 class="section-title">
        <small>{{ L('团队', 'Team') }}</small>
        {{ L('成员', 'Members') }}
      </h2>
      <TeamCard />
    </div>
    <div>
      <h2 class="section-title">
        <small>{{ L('排行榜', 'Leaderboard') }}</small>
        {{ L('玩家分数 Top 30', 'Top 30 Scores') }}
      </h2>
      <Leaderboard />
    </div>
  </div>
</template>

<style scoped>
.block--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
@media (max-width: 768px) {
  .block--two {
    grid-template-columns: 1fr;
  }
}
</style>
