<template>
  <div class="pt-6">
    <div class="bookaro-settings-section bookaro-settings-section--danger">
      <div class="bookaro-settings-section__title">
        {{ i18n.delete_data_tab }}
      </div>
      <div class="bookaro-settings-section__desc">
        {{ i18n.delete_data_description }}
      </div>
      <p class="text-red-600 text-sm">
        {{ i18n.delete_data_warning }}
      </p>
      <div>
        <DeleteDataButton :i18n="i18n" />
      </div>
    </div>
  </div>
</template>

<script>
import DeleteDataButton from './DeleteDataButton.vue';
export default {
  name: 'DeleteDataTab',
  components: { DeleteDataButton },
  props: { i18n: { type: Object, required: true } }
};
</script>

<style scoped>
</style>
