import type { Editor } from "@tiptap/react"
import { ToolbarButton } from "./ToolbarButton"

interface ListControlsProps {
  editor: Editor
}

export function ListControls({ editor }: React.PropsWithChildren<ListControlsProps>) {
  return (
    <div className="flex items-center gap-2">
      <ToolbarButton
        onClick={() => editor.chain().focus().toggleBulletList().run()}
        isActive={editor.isActive("bulletList")}
        icon="mdi:format-list-bulleted"
        title="Bullet List"
      />
      <ToolbarButton
        onClick={() => editor.chain().focus().toggleOrderedList().run()}
        isActive={editor.isActive("orderedList")}
        icon="mdi:format-list-numbered"
        title="Numbered List"
      />
    </div>
  )
}