<template>
  <Tabs default-value="skeleton" class="w-full">
    <TabsList
      class="mx-auto mb-8 flex items-center justify-center gap-[24px] bg-transparent sm:gap-[48px]"
    >
      <div
        v-for="n in 4"
        :key="'tab-skeleton-' + n"
        class="h-[56px] w-[56px] animate-pulse rounded-full bg-gray-200 dark:bg-gray-700"
      />
    </TabsList>

    <TabsContent
      value="skeleton"
      class="mx-auto w-full overflow-hidden xl:w-auto xl:max-w-[1190px]"
    >
      <div
        class="bg-surface-background border-surface-border grid h-full min-h-[630px] w-full gap-[16px] rounded-[2rem] border p-[16px] lg:grid-cols-2"
      >
        <div
          v-for="n in 4"
          :key="'grid-skeleton-' + n"
          class="h-[180px] w-full animate-pulse rounded-[16px] bg-gray-200 lg:h-[290px] dark:bg-gray-700"
        />
      </div>
    </TabsContent>
  </Tabs>
</template>
