<script setup lang="ts">
import { Bell, House, Key, Operation, Phone, ScaleToOriginal, 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 },
  { label: '通知', to: '/notifications', icon: Bell },
  { label: '实名', to: '/realname', icon: UserFilled },
  { label: '后台登录', to: '/admin/login', icon: Key },
  { label: '仲裁', to: '/admin/disputes', icon: ScaleToOriginal },
  { label: '配置', to: '/admin/system-configs', icon: Operation },
  { label: '登录', to: '/login', icon: Phone },
]
</script>

<template>
  <div class="app-shell">
    <aside class="sidebar">
      <RouterLink class="brand" to="/">
        <span class="brand-mark">H</span>
        <span>哈夫币租号</span>
      </RouterLink>
      <nav class="nav">
        <RouterLink v-for="item in navItems" :key="item.to" class="nav-link" :to="item.to">
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.label }}</span>
        </RouterLink>
      </nav>
    </aside>
    <main class="main">
      <slot />
    </main>
  </div>
</template>
