<template>
  <article class="skeleton-card">
    <div class="skeleton-media"><i class="fa-solid fa-image" aria-hidden="true"></i></div>
    <div class="skeleton-info">
      <div class="skeleton-line title"></div>
      <div class="skeleton-chips">
        <span class="skeleton-chip"></span>
        <span class="skeleton-chip"></span>
        <span class="skeleton-chip"></span>
        <span class="skeleton-chip"></span>
      </div>
      <div class="skeleton-line price"></div>
    </div>
  </article>
</template>

<style scoped>
.skeleton-card {
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid transparent;
}

.skeleton-media,
.skeleton-line,
.skeleton-chip {
  position: relative;
  overflow: hidden;
  background: #eee;
}

.skeleton-media {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.skeleton-media i { position: relative; z-index: 1; color: #c2c2c2; font-size: 44px; }

.skeleton-media::after,
.skeleton-line::after,
.skeleton-chip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #f7f7f7, transparent);
  animation: shimmer 1.25s infinite;
  transform: translateX(-100%);
}

.skeleton-info {
  padding: 12px;
}

.skeleton-line {
  height: 22px;
  border-radius: 6px;
}

.skeleton-line.title {
  width: 90%;
  margin-bottom: 11px;
}

.skeleton-line.price {
  width: 35%;
}

.skeleton-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.skeleton-chip {
  width: 46px;
  height: 18px;
  border-radius: 5px;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
</style>
