<template>
  <div class="skeleton-grid">
    <div
      v-for="n in count"
      :key="n"
      class="skeleton-card"
      aria-hidden="true"
    >
      <div class="skeleton-line skeleton-line--title"></div>
      <div class="skeleton-line skeleton-line--meta"></div>
      <div class="skeleton-line skeleton-line--desc"></div>
      <div class="skeleton-line skeleton-line--desc skeleton-line--short"></div>
      <div class="skeleton-tags">
        <div class="skeleton-tag"></div>
        <div class="skeleton-tag"></div>
        <div class="skeleton-tag skeleton-tag--small"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SkeletonCard',
  props: {
    /** 骨架卡片数量，默认 6 */
    count: { type: Number, default: 6 },
  },
};
</script>

<style lang="less" scoped>
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: 20px;
  background: #fff;
  border-radius: 6px;
}

.skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e4e4e4 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;

  &--title {
    width: 55%;
    height: 18px;
    margin-bottom: 14px;
  }

  &--meta {
    width: 35%;
    height: 13px;
    margin-bottom: 16px;
  }

  &--desc {
    width: 90%;
    height: 13px;
    margin-bottom: 8px;

    &--short {
      width: 60%;
    }
  }
}

.skeleton-tags {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.skeleton-tag {
  width: 48px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e4e4e4 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;

  &--small {
    width: 36px;
  }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 768px) {
  .skeleton-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
</style>
