<!--
/**
 * Error Dialog Component - Platform Neutral Error Display
 * 
 * Modal dialog for displaying error messages
 * 
 * @author Matthew Raymer
 * @version 1.0.0
 */
-->

<template>
  <div class="error-dialog-overlay" @click="handleOverlayClick">
    <div class="error-dialog" @click.stop>
      <div class="error-header">
        <div class="error-icon">⚠️</div>
        <h3 class="error-title">Error</h3>
      </div>
      
      <div class="error-content">
        <p class="error-message">{{ message }}</p>
      </div>
      
      <div class="error-actions">
        <button class="error-button secondary" @click="handleClose">
          Close
        </button>
        <button class="error-button primary" @click="handleRetry">
          Retry
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, toNative } from 'vue-facing-decorator'

@Component
class ErrorDialog extends Vue {
  @Prop({ type: String, required: true }) message!: string
  handleOverlayClick() { this.$emit('close') }
  handleClose() { this.$emit('close') }
  handleRetry() { this.$emit('retry') }
}
export default toNative(ErrorDialog)
</script>

<style scoped>
.error-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.error-dialog {
  background: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.error-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.error-icon {
  font-size: 24px;
}

.error-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #d32f2f;
}

.error-content {
  margin-bottom: 24px;
}

.error-message {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

.error-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.error-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.error-button.secondary {
  background: #f5f5f5;
  color: #666;
}

.error-button.secondary:hover {
  background: #e0e0e0;
}

.error-button.primary {
  background: #1976d2;
  color: white;
}

.error-button.primary:hover {
  background: #1565c0;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .error-dialog {
    margin: 20px;
    padding: 20px;
  }
  
  .error-actions {
    flex-direction: column;
  }
  
  .error-button {
    width: 100%;
  }
}
</style>
