<script setup lang="ts">
import {
  Bell,
  CirclePlus,
  House,
  Search,
  Shop,
  Tickets,
  UserFilled,
  Wallet,
} from "@element-plus/icons-vue";

const navItems = [
  { label: "首页", to: "/", icon: House },
  { label: "租号大厅", to: "/listings", icon: Shop },
  { label: "我的订单", to: "/orders", icon: Tickets },
  { label: "钱包", to: "/wallet", icon: Wallet },
];
</script>

<template>
  <div class="pc-app-shell">
    <header class="pc-topbar">
      <RouterLink class="pc-brand" to="/">
        <span class="pc-brand-mark">HFB</span>
        <span class="pc-brand-text">哈夫币租号</span>
      </RouterLink>

      <nav class="pc-nav">
        <RouterLink
          v-for="item in navItems"
          :key="item.to"
          class="pc-nav-link"
          :to="item.to"
        >
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </RouterLink>
      </nav>

      <div class="pc-search">
        <el-icon><Search /></el-icon>
        <input placeholder="搜索区服 / 段位 / 哈夫币数量" />
      </div>

      <div class="pc-user-actions">
        <RouterLink class="pc-icon-link" to="/notifications" aria-label="通知">
          <el-icon><Bell /></el-icon>
        </RouterLink>
        <RouterLink class="pc-login-link" to="/login">
          <el-icon><UserFilled /></el-icon>
          <span>登录/注册</span>
        </RouterLink>
        <RouterLink class="pc-post-link" to="/seller/listings/create">
          <el-icon><CirclePlus /></el-icon>
          <span>发布账号</span>
        </RouterLink>
      </div>
    </header>

    <main class="pc-main">
      <slot />
    </main>
  </div>
</template>
