<script setup lang="ts">
/**
 * @file LoadingSkeleton.vue
 * @description คอมโพเนนต์ Skeleton สำหรับแสดงโครงร่างหน้าจอระหว่างรอโหลดข้อมูล (Loading Skeleton Component)
 */
defineProps<{
  type?: 'text' | 'avatar' | 'card' | 'button'
  width?: string
  height?: string
  count?: number
}>()
</script>

<template>
  <div class="skeleton-wrapper">
    <!-- กรณีเป็นโครงร่างประเภทการ์ด (Card type skeleton) -->
    <template v-if="type === 'card'">
      <div v-for="i in (count || 1)" :key="i" class="skeleton-card">
        <div class="skeleton skeleton-image"/>
        <div class="skeleton-content">
          <div class="skeleton skeleton-title"/>
          <div class="skeleton skeleton-text"/>
          <div class="skeleton skeleton-text short"/>
        </div>
      </div>
    </template>
    
    <!-- กรณีเป็นโครงร่างประเภทรูปโปรไฟล์ (Avatar type skeleton) -->
    <template v-else-if="type === 'avatar'">
      <div class="skeleton skeleton-avatar"/>
    </template>
    
    <!-- กรณีเป็นโครงร่างประเภทปุ่มกด (Button type skeleton) -->
    <template v-else-if="type === 'button'">
      <div class="skeleton skeleton-button" :style="{ width: width || '120px' }"/>
    </template>
    
    <!-- กรณีอื่นๆ จะแสดงเป็นบรรทัดข้อความ (Fallback/Text type skeleton) -->
    <template v-else>
      <div 
        v-for="i in (count || 1)" 
        :key="i" 
        class="skeleton skeleton-text"
        :style="{ width: width || '100%', height: height || '16px' }"
      />
    </template>
  </div>
</template>

<style scoped>
.skeleton-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton {
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

.skeleton-card {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.skeleton-image {
  height: 160px;
  border-radius: 0;
}

.skeleton-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-title {
  height: 20px;
  width: 80%;
}

.skeleton-text {
  height: 14px;
  width: 100%;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-button {
  height: 40px;
  border-radius: 8px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
</style>
