<template>
  <view class="state-card" :class="type">
    <text class="state-text">{{ text }}</text>
    <button v-if="retryText" class="retry-button" @tap="$emit('retry')">{{ retryText }}</button>
  </view>
</template>

<script setup lang="ts">
defineEmits(["retry"]);

defineProps({
  text: {
    type: String,
    required: true,
  },
  type: {
    type: String,
    default: "loading",
  },
  retryText: {
    type: String,
    default: "",
  },
});
</script>

<style scoped>
.state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  margin: 15px 0;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.loading::before {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #4f7cfe;
  animation: spin 1s linear infinite;
  display: block;
  margin-bottom: 12px;
}

.state-text {
  color: #999;
  font-size: 14px;
}

.retry-button {
  margin-top: 12px;
  font-size: 14px;
  color: #4f7cfe;
  background: #f1f5fe;
  border-radius: 20px;
  padding: 6px 18px;
}

.retry-button::after {
  content: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
