<script setup>
const props = defineProps({
  rows: { type: Number, default: 5 },
  cols: { type: Number, default: 4 },
});
</script>

<template>
  <div class="w-full animate-pulse">
    <div class="rounded-lg border border-gray-200 bg-white shadow-sm overflow-hidden">
      <!-- Table header skeleton -->
      <div class="bg-gray-50 border-b border-gray-200 px-6 py-3">
        <div class="flex gap-4">
          <div
            v-for="i in cols"
            :key="i"
            class="h-4 bg-gray-200 rounded flex-1"
            :class="{ 'max-w-[150px]': i === 1 }"
          ></div>
        </div>
      </div>
      <!-- Table body skeleton -->
      <div class="divide-y divide-gray-200">
        <div
          v-for="row in rows"
          :key="row"
          class="px-6 py-4 flex gap-4 items-center"
        >
          <div
            v-for="i in cols"
            :key="i"
            class="h-4 bg-gray-100 rounded flex-1"
            :class="{
              'max-w-[120px]': i === 1,
              'max-w-[100px]': i === 2,
            }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>


