<template>
  <view class="empty-state">
    <text class="empty-icon">{{ icon }}</text>
    <text class="empty-title">{{ title }}</text>
    <text class="empty-desc" v-if="desc">{{ desc }}</text>
    <button v-if="actionText" class="empty-action" @click="$emit('action')">{{ actionText }}</button>
  </view>
</template>

<script>
export default {
  name: 'EmptyState',
  props: {
    icon: { type: String, default: '🍻' },
    title: { type: String, default: '暂无内容' },
    desc: { type: String, default: '' },
    actionText: { type: String, default: '' }
  }
}
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx $sp-xl;
}

.empty-icon {
  font-size: 96rpx;
  margin-bottom: $sp-lg;
  opacity: 0.6;
}

.empty-title {
  font-size: $fs-base;
  font-weight: $fw-medium;
  color: $text-secondary;
  margin-bottom: $sp-sm;
}

.empty-desc {
  font-size: $fs-sm;
  color: $text-tertiary;
  text-align: center;
  line-height: $lh-normal;
}

.empty-action {
  margin-top: $sp-xl;
  padding: $sp-md $sp-2xl;
  background: linear-gradient(135deg, $amber, $amber-deep);
  color: $text-on-amber;
  font-size: $fs-base;
  font-weight: $fw-bold;
  border-radius: $radius-full;
  border: none;

  &::after {
    border: none;
  }

  &:active {
    opacity: 0.85;
    transform: scale(0.96);
  }
}
</style>
