<script setup>
import { reactive, ref } from 'vue';
const props = defineProps({
  editor: {
    type: Object,
    required: true,
  }
});
const editor = reactive(props.editor);

const undo = () => {
  editor.chain().focus().undo().run()
}

const redo = () => {
  editor.chain().focus().redo().run()
}

// Public method to clear content
const clearContent = () => {
  editor.commands.clearContent()
}
</script>

<template>
<!-- History Tab -->
<div class="flex items-center space-x-1 flex-wrap text-sm text-gray-800">
  <button 
    @click="undo" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Undo"
    :disabled="!editor.can().undo()"
    :class="{ 'opacity-40 cursor-not-allowed': !editor.can().undo() }"
  >
    défaire
  </button>
  
  <button 
    @click="redo" 
    class="px-2 py-0.5 rounded-lg hover:bg-gray-200 bg-gray-300 my-0.5"
    title="Redo"
    :disabled="!editor.can().redo()"
    :class="{ 'opacity-40 cursor-not-allowed': !editor.can().redo() }"
  >
    refaire
  </button>
  
  <button 
    @click="clearContent" 
    class="px-2 py-0.5 rounded-lg hover:bg-red-600 bg-red-500 my-0.5 text-white"
    title="Clear Content"
  >
    tout supprimer
  </button>
</div>
</template>