<template>
  <div class="store-detail-skeleton" :class="`store-detail-skeleton--${variant}`">
    <template v-if="variant === 'goods'">
      <div class="store-detail-skeleton__layout">
        <aside class="store-detail-skeleton__aside">
          <a-skeleton-shape size="large" />
          <a-skeleton-line :widths="['85%']" :rows="1" />
          <a-skeleton-line :widths="['100%', '90%']" :rows="2" />
          <a-skeleton-line :widths="['50%']" :rows="1" />
          <a-skeleton-line :widths="['100%']" :rows="1" />
        </aside>
        <main class="store-detail-skeleton__main">
          <a-skeleton-line :widths="['120px']" :rows="1" />
          <a-skeleton-line :rows="8" />
        </main>
      </div>
    </template>

    <template v-else-if="variant === 'order'">
      <div class="store-detail-skeleton__card">
        <a-skeleton-line :widths="['100%']" :rows="1" />
        <a-skeleton-line :widths="['60%']" :rows="1" />
      </div>
      <div class="store-detail-skeleton__card">
        <a-skeleton-line :widths="['100px']" :rows="1" />
        <a-skeleton-line :rows="6" />
      </div>
      <div class="store-detail-skeleton__card">
        <a-skeleton-line :widths="['100px']" :rows="1" />
        <a-skeleton-line :rows="4" />
      </div>
    </template>

    <template v-else>
      <a-space direction="vertical" :style="{ width: '100%' }" size="large">
        <a-space align="center" :size="16">
          <a-skeleton-shape size="large" />
          <a-skeleton-line :widths="['min(320px, 70vw)']" :rows="1" />
        </a-space>
        <a-skeleton-line :widths="['72px', '120px']" :rows="1" />
        <a-skeleton-line :rows="10" />
      </a-space>
    </template>
  </div>
</template>

<script setup>
defineProps({
  variant: {
    type: String,
    default: 'default',
    validator: (v) => ['default', 'goods', 'order'].includes(v)
  }
})
</script>

<style scoped lang="less">
@import '@/styles/store-theme.less';

.store-detail-skeleton {
  width: 100%;

  &--goods,
  &--order,
  &--default {
    background: @store-card-bg;
    border: 1px solid @store-card-border;
    border-radius: @store-radius;
    padding: clamp(16px, 4vw, 32px);
  }

  &--order {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: transparent;
    border: none;
    padding: 0;
  }

  &__layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 24px;

    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }

  &__aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: @store-card-bg;
    border: 1px solid @store-card-border;
    border-radius: @store-radius;
  }

  &__main {
    padding: 20px;
    background: @store-card-bg;
    border: 1px solid @store-card-border;
    border-radius: @store-radius;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  &__card {
    padding: 20px;
    background: @store-card-bg;
    border: 1px solid @store-card-border;
    border-radius: @store-radius;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}
</style>
