<template>
  <div>
    <div class="tw:flex tw:justify-between tw:items-start">
      <div>
        <h3 class="p-card-title">
          {{ title }}
        </h3>

        <slot/>
      </div>
      <div class="tw:flex tw:items-center tw:gap-2">
        <Button
          icon="fa fa-cog"
          severity="contrast"
          rounded
          text
          @click="$emit('onShowSettings')"
        />

        <Button
          icon="fa fa-trash"
          severity="danger"
          rounded
          text
          @click="confirmedRemove($event)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import {Button, useConfirm} from "primevue";

const props = defineProps({
  title: {
    type: String,
    default: null,
  },
});

const confirm = useConfirm();
const emit = defineEmits(['onRemove', 'onShowSettings']);

function confirmedRemove(event) {
  confirm.require({
    group: 'popup',
    target: event.currentTarget,
    message: 'Удалить блок?',
    icon: 'pi pi-exclamation-triangle',
    rejectProps: {
      label: 'Отмена',
      severity: 'secondary',
      outlined: true
    },
    acceptProps: {
      label: 'Удалить',
      severity: 'danger'
    },
    accept: () => emit('onRemove'),
  });
}
</script>
