<script setup>
import DialogModal from './DialogModal.vue';
import PrimaryButton from './PrimaryButton.vue';

const props = defineProps({
  show: { type: Boolean, default: false },
  title: { type: String, default: 'Potrditev' },
  message: { type: String, default: 'Ali ste prepričani?' },
  confirmText: { type: String, default: 'Potrdi' },
  cancelText: { type: String, default: 'Prekliči' },
  danger: { type: Boolean, default: false },
});

const emit = defineEmits(['close', 'confirm']);

const onClose = () => emit('close');
const onConfirm = () => emit('confirm');
</script>

<template>
  <DialogModal :show="show" @close="onClose">
    <template #title>
      {{ title }}
    </template>
    <template #content>
      <p class="text-sm text-gray-700">{{ message }}</p>
      <div class="mt-6 flex items-center justify-end gap-3">
        <button type="button" class="px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50" @click="onClose">
          {{ cancelText }}
        </button>
        <PrimaryButton :class="danger ? 'bg-red-600 hover:bg-red-700 focus:ring-red-500' : ''" @click="onConfirm">
          {{ confirmText }}
        </PrimaryButton>
      </div>
    </template>
  </DialogModal>
  
</template>
