<template>
    <div class="wrapper">
      <!-- 경로 -->
      <nav class="breadcrumb">{{ breadcrumb }}</nav>
  
      <!-- 화면 명 + 버튼 영역 -->
      <header class="header">
        <h1 class="title">{{ pageTitle }}</h1>
        <div class="header-actions">
          <slot name="actions" />
        </div>
      </header>
  
      <!-- 메인 콘텐츠 -->
      <main class="content">
        <slot />
      </main>
    </div>
  </template>
  
  <script setup lang="ts">
  import { useRoute } from '#imports'
  
  const route = useRoute()
  
  // 경로(메뉴 경로)
  const breadcrumb = computed(() => route.path)
  
  // 화면명(meta.title 값)
  const pageTitle = computed(() => route.meta.title || 'Untitled Page')
  </script>
  
  <style scoped>
  .wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 16px;
    background: #f9f9f9;
    min-height: 100%;
  }
  
  .breadcrumb {
    font-size: 14px;
    color: #666;
  }
  
  /* 화면명과 버튼을 좌우 끝으로 배치 */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .title {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
  }
  
  .header-actions {
    display: flex;
    gap: 8px;
  }
  
  .content {
    flex: 1;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  /* 버튼 공통 스타일 */
.header-actions ::v-deep button {
  background-color: #4CAF50;
  color: white;
  font-size: 14px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.header-actions ::v-deep button:hover {
  background-color: #45a049;
}

.header-actions ::v-deep button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

  </style>
  