<script setup lang="ts">
import { useAuthStore } from '~/stores/login';
import locale from 'ant-design-vue/es/locale/ko_KR';
import { DEFAULT_THEME } from '~/constants/theme/ui';

const authStore = useAuthStore();
const { authorization } = storeToRefs(authStore);
</script>

<template>
  <a-config-provider :locale="locale" :theme="DEFAULT_THEME">
    <a-layout style="min-height: 100vh">
      <a-layout-sider>
        <a-row class="h-34 p-4" justify="center">
          <a-col>
            <a-space warp direction="vertical" :size="18">
              <a-avatar :size="48" shape="circle" style="background: #999">
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
              <span class="text-white">{{ authorization.memberName }}</span>
            </a-space>
          </a-col>
        </a-row>
        <layout-left-menu />
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="padding: 0">
          <layout-header />
        </a-layout-header>
        <a-layout-content class="p-4">
          <slot />
        </a-layout-content>
        <a-layout-footer>
          <layout-footer />
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </a-config-provider>
</template>
