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

<template>
<!-- Block Elements Tab -->
<div class="flex items-center space-x-2 flex-wrap">
        <button 
          @click="editor.chain().focus().setParagraph().run()" 
          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
          :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
          title="Paragraph"
        >
          <span class="font-medium">¶</span>
        </button>
        
        <button 
          @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" 
          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
          :class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
          title="Heading 1"
        >
          <span class="font-medium">H1</span>
        </button>
        
        <button 
          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" 
          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
          :class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
          title="Heading 2"
        >
          <span class="font-medium">H2</span>
        </button>
        
        <button 
          @click="editor.chain().focus().toggleHeading({ level: 3 }).run()" 
          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
          :class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
          title="Heading 3"
        >
          <span class="font-medium">H3</span>
        </button>

        <button 
          @click="editor.chain().focus().toggleHeading({ level: 4 }).run()" 
          class="px-2 py-1 text-sm rounded hover:bg-gray-100"
          :class="{ 'bg-gray-200': editor.isActive('heading', { level: 4 }) }"
          title="Heading 3"
        >
          <span class="font-medium">H4</span>
        </button>

        <button 
          @click="editor.chain().focus().toggleBlockquote().run()" 
          class="p-1 rounded hover:bg-gray-100"
          :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
          title="Blockquote"
        >
          <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 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
          </svg>
        </button>

        <button 
          @click="editor.chain().focus().setHorizontalRule().run()" 
          class="p-1 rounded hover:bg-gray-100"
          title="Horizontal Rule"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
        </button>

        <button 
          @click="editor.chain().focus().toggleCodeBlock().run()" 
          class="p-1 rounded hover:bg-gray-100"
          :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
          title="Code Block"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <polyline points="16 18 22 12 16 6"></polyline>
            <polyline points="8 6 2 12 8 18"></polyline>
          </svg>
        </button>
      </div>
</template>