<template>
  <view class="search-skeleton">
    <view class="search-skeleton__header px-24rpx pt-8rpx pb-12rpx flex items-center justify-between gap-16rpx">
      <view class="search-skeleton__circle skeleton-item"></view>
      <view class="search-skeleton__pill flex-1 skeleton-item"></view>
      <view class="search-skeleton__circle skeleton-item"></view>
    </view>
    <view class="search-skeleton__section">
      <view class="search-skeleton__title-row">
        <view class="search-skeleton__title skeleton-item"></view>
        <view class="search-skeleton__clear skeleton-item"></view>
      </view>
      <view class="search-skeleton__tags">
        <view v-for="i in 5" :key="'r-' + i" class="search-skeleton__tag skeleton-item"></view>
      </view>
    </view>
    <view class="search-skeleton__section">
      <view class="search-skeleton__title skeleton-item search-skeleton__title--wide"></view>
      <view class="search-skeleton__tags">
        <view v-for="i in 8" :key="'h-' + i" class="search-skeleton__tag skeleton-item"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.skeleton-item {
  background: linear-gradient(90deg, #ececec 25%, #e0e0e0 50%, #ececec 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

.search-skeleton {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: env(safe-area-inset-top, 0px);
}

.search-skeleton__circle {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.search-skeleton__pill {
  height: 80rpx;
  border-radius: 999rpx;
}

.search-skeleton__section {
  padding: 28rpx 24rpx 8rpx;
}

.search-skeleton__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28rpx;
}

.search-skeleton__title {
  width: 180rpx;
  height: 40rpx;
  border-radius: 8rpx;
}
.search-skeleton__title--wide {
  width: 220rpx;
  margin-bottom: 28rpx;
}

.search-skeleton__clear {
  width: 56rpx;
  height: 32rpx;
  border-radius: 8rpx;
}

.search-skeleton__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16rpx 14rpx;
}

.search-skeleton__tag {
  width: 132rpx;
  height: 60rpx;
  border-radius: 999rpx;
}
</style>
