<script setup lang="ts">
/**
 * C 端菜单分组：分组标题 + 内容槽位。
 * layout=grid 时子项宫格排列；通过 provide 告知 ArtMenuItem 切换样式。
 */
import { computed, provide, toRef } from 'vue'

const props = withDefaults(defineProps<{
  title?: string
  eyebrow?: string
  /** list 纵向列表；grid 宫格（默认 list 兼容其它页） */
  layout?: 'list' | 'grid'
}>(), {
  title: '',
  eyebrow: '',
  layout: 'list',
})

provide('artMenuLayout', toRef(props, 'layout'))

const bodyClass = computed(() => (
  props.layout === 'grid' ? 'group-body group-body--grid' : 'group-body'
))
</script>

<template>
  <view class="art-menu-group">
    <view v-if="title || eyebrow" class="group-head">
      <text v-if="eyebrow" class="hero-eyebrow">{{ eyebrow }}</text>
      <text v-if="title" class="group-title">{{ title }}</text>
    </view>
    <view :class="bodyClass">
      <slot />
    </view>
  </view>
</template>

<style scoped lang="scss">
.art-menu-group {
  margin-bottom: 40rpx;
}
.group-head {
  margin-bottom: 20rpx;
  padding: 0 8rpx;
}
.group-title {
  display: block;
  font-size: 28rpx;
  color: rgb(var(--art-text));
  font-family: 'Playfair Display', 'Noto Serif SC', serif;
  font-style: italic;
}
.group-body {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
/* 三列宫格；窄屏仍可读，卡片自带最小高度 */
.group-body--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}
</style>
