<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-2 flex-wrap">
  <button 
    @click="undo" 
    class="p-1 rounded hover:bg-gray-100 flex items-center"
    title="Undo"
    :disabled="!editor.can().undo()"
    :class="{ 'opacity-50 cursor-not-allowed': !editor.can().undo() }"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="M3 10h10a8 8 0 0 1 8 8v2M3 10l6 6M3 10l6-6"></path>
    </svg>
    <span class="ml-1 text-sm">Undo</span>
  </button>
  
  <button 
    @click="redo" 
    class="p-1 rounded hover:bg-gray-100 flex items-center"
    title="Redo"
    :disabled="!editor.can().redo()"
    :class="{ 'opacity-50 cursor-not-allowed': !editor.can().redo() }"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="M21 10H11a8 8 0 0 0-8 8v2M21 10l-6 6M21 10l-6-6"></path>
    </svg>
    <span class="ml-1 text-sm">Redo</span>
  </button>
  
  <div class="border-r border-gray-300 h-6 mx-1"></div>
  
  <button 
    @click="clearContent" 
    class="p-1 rounded hover:bg-gray-100 flex items-center text-red-500"
    title="Clear Content"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <path d="M18 6L6 18"></path>
      <path d="M6 6l12 12"></path>
    </svg>
    <span class="ml-1 text-sm">Clear All</span>
  </button>
</div>
</template>