<template>
  <div class="error-component">
    <div class="error-icon">
      <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"></circle>
        <line x1="12" y1="8" x2="12" y2="12"></line>
        <line x1="12" y1="16" x2="12.01" y2="16"></line>
      </svg>
    </div>
    <h3 class="error-title">{{ title }}</h3>
    <p class="error-message">{{ message }}</p>
    <el-button v-if="showRetry" type="primary" @click="$emit('retry')">
      Retry
    </el-button>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: 'Oops! Something went wrong'
  },
  message: {
    type: String,
    default: 'Failed to load the component. Please try again.'
  },
  showRetry: {
    type: Boolean,
    default: true
  }
})

defineEmits(['retry'])
</script>

<style scoped>
.error-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 20px;
  text-align: center;
}

.error-icon {
  color: #f56c6c;
  margin-bottom: 16px;
}

.error-title {
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  margin: 0 0 8px;
}

.error-message {
  font-size: 14px;
  color: #606266;
  margin: 0 0 16px;
  max-width: 400px;
}
</style>