<template>
  <div class="setting-group">
    <Divider v-if="divider" />
    <h3>{{ formatCamelCase(group.label) }}</h3>
    <div
      v-for="setting in group.settings"
      :key="setting.id"
      class="setting-item flex items-center mb-4"
    >
      <SettingItem :setting="setting" />
    </div>
  </div>
</template>

<script setup lang="ts">
import Divider from 'primevue/divider'
import SettingItem from '@/components/dialog/content/setting/SettingItem.vue'
import { SettingParams } from '@/types/settingTypes'
import { formatCamelCase } from '@/utils/formatUtil'

defineProps<{
  group: {
    label: string
    settings: SettingParams[]
  }
  divider?: boolean
}>()
</script>
