<template>
  <paged-wrapper
    pagination-background
    pagination-class="w-min"
    :hide-pager="brief"
    :num="10"
    :handle-request="getClubList"
    @load-complete="$emit('loadComplete')"
  >
    <template #default="{ data }">
      <div class="flex gap-10px">
        <club-list-item
          v-for="club of data"
          :club="club"
          :click="click"
          @click="click && $emit('click', club)"
        />
      </div>
    </template>
    <template #empty>
      <div class="font-bold text-5">暂无社团</div>
    </template>
  </paged-wrapper>
</template>
<script setup lang="ts">
import { getClubList } from '@/api';
import PagedWrapper from '@/components/PagedWrapper.vue';
import { type Club } from '@/schemas/response';
import { useUserStore } from '@/stores/user';
import ClubListItem from './ClubListItem.vue';
const userStore = useUserStore();
const { click = false, brief = false } = defineProps<{
  brief?: boolean;
  click?: boolean;
}>();
defineEmits<{
  click: [club: Club];
  loadComplete: [];
}>();
</script>
