<script setup lang="ts">
import CardContent from '~/components/pub/ui/card/CardContent.vue'

const route = useRoute()

// Ambil meta dan set default
const contentFrame = computed(() => route.meta.contentFrame ?? 'cf-container-lg')

// Mapping aman supaya tidak ada class invalid
const contentFrameClass = computed(() => {
  const allowed = [
    'cf-container-2xl',
    'cf-container-xl',
    'cf-container-lg',
    'cf-container-md',
    'cf-container-sm',
    'cf-full-width',
    'cf-no-frame',
  ]
  return allowed.includes(contentFrame.value as string) ? contentFrame.value : 'cf-container-lg'
})
</script>

<template>
  <SidebarProvider>
    <LayoutAppSidebar />

    <SidebarInset>
      <LayoutHeader />

      <!-- Outer wrapper always full width -->
      <div class="flex w-full justify-center p-4 2xl:p-5">
        <!-- Frame mode (container + card) -->
        <template v-if="contentFrameClass !== 'cf-no-frame'">
          <div :class="['content-frame', contentFrameClass]">
            <Card>
              <CardContent>
                <slot />
              </CardContent>
            </Card>
          </div>
        </template>

        <!-- No frame → direct slot -->
        <template v-else>
          <slot />
        </template>
      </div>
    </SidebarInset>
  </SidebarProvider>
</template>

<style scoped>
/* Base: semua frame full width by default */
.content-frame {
  width: 100%;
}

/* Max-width container variants */
.cf-container-2xl {
  max-width: 1400px;
}

.cf-container-xl {
  max-width: 1200px;
}

.cf-container-lg {
  max-width: 992px;
}

.cf-container-md {
  max-width: 768px;
}

.cf-container-sm {
  max-width: 576px;
}

/* Full width (no max width) */
.cf-full-width {
  width: 100%;
  max-width: 100%;
}
</style>
