<script setup lang="ts">
import { getResourcesData } from "#layers/utils/dataUtil";
import type { PageDataComponent } from "#layers/types/api/pageData";

const props = defineProps<{
  componentData: PageDataComponent;
  groupSets?: boolean;
}>();

const resourcesData = computed(() => {
  return getResourcesData({
    resources: props.componentData?.resources,
    isMultiple: true,
    groupSets: props.groupSets,
  });
});

console.log("ButtonList resourcesData:", resourcesData.value);
</script>

<template>
  <template
    v-if="resourcesData"
    v-for="button in resourcesData"
    :key="button.group_label"
  >
    <AtomsButton>
      {{ button.btn_info?.txt_btn_name }}
    </AtomsButton>

    <!-- :style="{
        backgroundColor: button.btn_info?.color_code_btn,
        color: button.btn_info?.color_code_txt,
      }" -->
  </template>
</template>
