import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { EditorBubbleItem, useEditor } from "novel";
import { selectionItems } from "./selection-items";

const items = selectionItems.filter((item) => item.inline);

export const TextButtons = () => {
  const { editor } = useEditor();
  if (!editor) return null;

  return (
    <div className="flex">
      {items.map((item) => (
        <EditorBubbleItem
          key={item.name}
          onSelect={(editor) => {
            item.command(editor);
          }}
        >
          <Button
            size="sm"
            className="rounded-none"
            variant="ghost"
            type="button"
          >
            <item.icon
              className={cn(
                "h-4 w-4",
                item.isActive(editor) && "text-blue-500",
              )}
            />
          </Button>
        </EditorBubbleItem>
      ))}
    </div>
  );
};