<template>
  <div class="user-center-skeleton custom-pulse" :class="[layout === 'desktop' ? 'w-full' : '']">
    <!-- --- Header Part --- -->
    <template v-if="type === 'header'">
      <div v-if="layout === 'mobile'" class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
        <div class="size-[60px] rounded-full bg-[#A8FF53]/60"></div>
        <div class="flex flex-col gap-2">
          <div class="h-5 w-40 rounded bg-[#A8FF53]/60"></div>
          <div class="h-3 w-24 rounded bg-[#A8FF53]/40"></div>
        </div>
      </div>
      <div v-else class="mb-3 flex flex-col items-center">
        <div class="size-[60px] rounded-full bg-[#A8FF53]/60"></div>
        <div class="mt-2 h-6 w-32 rounded bg-[#A8FF53]/60"></div>
      </div>
    </template>

    <!-- --- Devices Part --- -->
    <template v-if="type === 'devices'">
      <div v-if="layout === 'mobile'" class="h-[76px] w-full rounded-2xl bg-[#A8FF53]/15"></div>
      <div v-else class="h-[160px] w-full rounded-2xl bg-[#A8FF53]/15"></div>
    </template>

    <!-- --- Plans Part --- -->
    <template v-if="type === 'plans'">
      <div class="space-y-4">
        <div class="h-[120px] w-full rounded-2xl bg-black/15"></div>
        <div class="h-[120px] w-full rounded-2xl bg-black/15"></div>
      </div>
    </template>

    <!-- --- Payments Part --- -->
    <template v-if="type === 'payments'">
      <div class="h-[300px] w-full rounded-2xl bg-black/15"></div>
    </template>

    <!-- --- Full Layouts (Backward Compatibility) --- -->
    <template v-if="!type">
      <!-- Old Full Layout implementation if needed, but we'll use type-based now -->
    </template>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  type?: 'header' | 'devices' | 'plans' | 'payments'
  layout?: 'mobile' | 'desktop'
}>()
</script>

<style scoped>
.custom-pulse {
  animation: fast-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes fast-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
</style>
