<template>
  <div v-if="open" class="modal-overlay">
    <div class="modal-card">
      <h3>{{ title || t('confirm.title') }}</h3>
      <p>{{ message || t('confirm.message') }}</p>
      <div class="modal-actions">
        <button class="card" type="button" @click="cancel">{{ t('actions.cancel') }}</button>
        <button class="card" type="button" @click="confirm">{{ t('actions.confirm') }}</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { t } = useI18n()

const props = defineProps({
  open: { type: Boolean, default: false },
  title: { type: String, default: '' },
  message: { type: String, default: '' }
})

const emit = defineEmits(['confirm', 'cancel'])

const confirm = () => emit('confirm')
const cancel = () => emit('cancel')
</script>
