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

interface AlignmentControlsProps {
  editor: Editor
}

export function AlignmentControls({ editor }: React.PropsWithChildren<AlignmentControlsProps>) {
  return (
    <div className="flex items-center gap-2">
      <ToolbarButton
        onClick={() => editor.chain().focus().setTextAlign("left").run()}
        isActive={editor.isActive({ textAlign: "left" })}
        icon="mdi:format-align-left"
        title="Align Left"
      />
      <ToolbarButton
        onClick={() => editor.chain().focus().setTextAlign("center").run()}
        isActive={editor.isActive({ textAlign: "center" })}
        icon="mdi:format-align-center"
        title="Align Center"
      />
      <ToolbarButton
        onClick={() => editor.chain().focus().setTextAlign("right").run()}
        isActive={editor.isActive({ textAlign: "right" })}
        icon="mdi:format-align-right"
        title="Align Right"
      />
      <ToolbarButton
        onClick={() => editor.chain().focus().setTextAlign("justify").run()}
        isActive={editor.isActive({ textAlign: "justify" })}
        icon="mdi:format-align-justify"
        title="Align Justify"
      />
    </div>
  )
}