<template>
  <!-- Search and filters skeleton -->
  <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between gap-3">
    <div class="flex items-center gap-2">
      <div class="h-9 w-64 bg-gray-100 rounded animate-pulse"></div>
    </div>
    <div class="h-4 w-20 bg-gray-100 rounded animate-pulse"></div>
  </div>

  <!-- Table skeleton -->
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-6 py-3">
            <div class="h-3 w-16 bg-gray-200 rounded animate-pulse"></div>
          </th>
          <th class="px-6 py-3">
            <div class="h-3 w-24 bg-gray-200 rounded animate-pulse"></div>
          </th>
          <th class="px-6 py-3">
            <div class="h-3 w-20 bg-gray-200 rounded animate-pulse"></div>
          </th>
          <th class="px-6 py-3">
            <div class="h-3 w-16 bg-gray-200 rounded animate-pulse"></div>
          </th>
          <th class="px-6 py-3">
            <div class="h-3 w-16 bg-gray-200 rounded animate-pulse"></div>
          </th>
          <th class="px-6 py-3">
            <div class="h-3 w-16 bg-gray-200 rounded animate-pulse"></div>
          </th>
          <th class="px-6 py-3 text-right">
            <div class="h-3 w-16 ml-auto bg-gray-200 rounded animate-pulse"></div>
          </th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-100">
        <tr v-for="i in 10" :key="i">
          <td class="px-6 py-3 whitespace-nowrap">
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 rounded-full bg-gray-200 animate-pulse"></div>
              <div class="min-w-0 space-y-2">
                <div class="h-3 w-40 bg-gray-200 rounded animate-pulse"></div>
                <div class="h-3 w-48 bg-gray-100 rounded animate-pulse"></div>
              </div>
            </div>
          </td>
          <td class="px-6 py-3">
            <div class="h-3 w-16 bg-gray-100 rounded animate-pulse"></div>
          </td>
          <td class="px-6 py-3">
            <div class="h-3 w-24 bg-gray-100 rounded animate-pulse"></div>
          </td>
          <td class="px-6 py-3">
            <div class="h-3 w-20 bg-gray-100 rounded animate-pulse"></div>
          </td>
          <td class="px-6 py-3">
            <div class="h-3 w-20 bg-gray-100 rounded animate-pulse"></div>
          </td>
          <td class="px-6 py-3">
            <div class="h-5 w-14 bg-gray-200 rounded-full animate-pulse"></div>
          </td>
          <td class="px-6 py-3 text-right">
            <div class="inline-flex items-center gap-2">
              <div class="h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
              <span class="text-gray-300">|</span>
              <div class="h-4 w-12 bg-gray-200 rounded animate-pulse"></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Pagination skeleton -->
  <div class="px-4 py-3 border-t border-gray-200 flex items-center justify-between">
    <div class="h-4 w-32 bg-gray-100 rounded animate-pulse"></div>
    <div class="flex items-center gap-2">
      <div class="h-9 w-24 bg-gray-100 rounded animate-pulse"></div>
      <div class="h-9 w-20 bg-gray-100 rounded animate-pulse"></div>
    </div>
  </div>
</template>

<script setup>
// Pure presentational skeleton component for conversations table
</script>
