<template>
  <view class="error-state">
    <text class="error-state-icon">&#x26A0;&#xFE0F;</text>
    <text class="error-state-text">{{ text }}</text>
    <view v-if="onRetry" class="error-state-retry" @tap="onRetry">
      <text class="error-state-retry-text">重新加载</text>
    </view>
  </view>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  text?: string
  onRetry?: () => void
}>(), {
  text: '加载失败，请稍后重试',
})
</script>

<style lang="scss" scoped>
.error-state {
  @include flex-center;
  flex-direction: column;
  padding: 80px 40px;
}

.error-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.error-state-text {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  margin-bottom: 24px;
}

.error-state-retry {
  background: $pri;
  border-radius: $r-pill;
  padding: 12px 40px;
}

.error-state-retry-text {
  color: $white;
  font-size: var(--tk-font-body-sm);
}
</style>
