<script setup>
import DashboardLayout from '../layouts/DashboardLayout.vue'

const groups = [
  {
    label: 'Navigation',
    icons: ['home','menu','close','arrow_back','arrow_forward','chevron_left','chevron_right',
            'expand_more','expand_less','more_vert','more_horiz','open_in_new','launch'],
  },
  {
    label: 'Actions',
    icons: ['add','edit','delete','save','search','filter_list','sort','share','download',
            'upload','copy_all','content_paste','refresh','sync'],
  },
  {
    label: 'Status & Feedback',
    icons: ['check_circle','error','warning','info','notifications','notification_important',
            'done','done_all','pending','hourglass_empty','lock','lock_open'],
  },
  {
    label: 'Content',
    icons: ['dashboard','table_view','text_fields','auto_awesome','map','bar_chart',
            'pie_chart','analytics','insights','summarize','article','description'],
  },
  {
    label: 'People & Social',
    icons: ['person','group','account_circle','face','supervised_user_circle',
            'person_add','logout','login','badge','contacts'],
  },
  {
    label: 'Media & Files',
    icons: ['image','photo','video_library','music_note','folder','folder_open',
            'attachment','cloud','cloud_upload','cloud_download','storage','backup'],
  },
]
</script>

<template>
  <DashboardLayout>
    <div class="space-y-6">
      <div
        v-for="group in groups"
        :key="group.label"
        class="rounded-2xl bg-white p-6 shadow-soft-md"
      >
        <h6 class="mb-4 text-sm font-bold text-dark">{{ group.label }}</h6>
        <div class="grid grid-cols-4 gap-3 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-13">
          <div
            v-for="icon in group.icons"
            :key="icon"
            class="group flex flex-col items-center gap-2 rounded-xl p-3 transition-all hover:bg-primary/5 hover:shadow-soft-xs cursor-default"
            :title="icon"
          >
            <span class="material-icons text-2xl text-secondary transition-colors group-hover:text-primary">
              {{ icon }}
            </span>
            <span class="w-full truncate text-center text-xs text-secondary group-hover:text-dark">
              {{ icon }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </DashboardLayout>
</template>
