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

<template>
<!-- Lists Tab -->
<div class="flex items-center space-x-2 flex-wrap">
  <button 
    @click="editor.chain().focus().toggleBulletList().run()" 
    class="p-1 rounded hover:bg-gray-100"
    :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
    title="Bullet List"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <line x1="8" y1="6" x2="21" y2="6"></line>
      <line x1="8" y1="12" x2="21" y2="12"></line>
      <line x1="8" y1="18" x2="21" y2="18"></line>
      <line x1="3" y1="6" x2="3.01" y2="6"></line>
      <line x1="3" y1="12" x2="3.01" y2="12"></line>
      <line x1="3" y1="18" x2="3.01" y2="18"></line>
    </svg>
  </button>
  
  <button 
    @click="editor.chain().focus().toggleOrderedList().run()" 
    class="p-1 rounded hover:bg-gray-100"
    :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
    title="Numbered List"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <line x1="10" y1="6" x2="21" y2="6"></line>
      <line x1="10" y1="12" x2="21" y2="12"></line>
      <line x1="10" y1="18" x2="21" y2="18"></line>
      <path d="M4 6h1v4"></path>
      <path d="M4 10h2"></path>
      <path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"></path>
    </svg>
  </button>
  
  <button 
    @click="editor.chain().focus().toggleTaskList().run()" 
    class="p-1 rounded hover:bg-gray-100"
    :class="{ 'bg-gray-200': editor.isActive('taskList') }"
    title="Task List"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
      <rect x="3" y="5" width="6" height="6" rx="1"></rect>
      <path d="M3 17h6"></path>
      <path d="M13 5h8"></path>
      <path d="M13 11h8"></path>
      <path d="M13 17h8"></path>
    </svg>
  </button>
</div>
</template>