<template>
  <div class="cd-view">
    <p>Are you sure you want to delete {{ character.name }}?</p>
    <button @click="deleteCharacter" class="btn btn-danger">Yes, Delete</button>
    <button @click="$emit('cancel')" class="btn btn-secondary">Cancel</button>
  </div>
</template>

<script>
import API from '../utils/api'

export default {
  name: "DeleteCharView",
  
  props: {
    character: {
      type: Object,
      required: true
    }
  },
  
  emits: ['deleted', 'cancel'],
  
  methods: {
    async deleteCharacter() {
      try {
        const response = await API.delete(`/api/characters/${this.character.id}`)

        if (response.status === 200 || response.status === 204) {
          this.$emit('deleted')
        } else {
          console.error('Failed to delete character')
        }
      } catch (error) {
        console.error('Error deleting character:', error)
      }
    }
  }
}
</script>

<style>
/* All common styles moved to main.css */
</style>

