"use client";
import React from "react";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import CreateArticleDialog from "@/components/article/create-article-dialog";
import CreateCategoryDialog from "@/components/category/create-category-dialog";
import { Button } from "./ui/button";
import { PlusIcon } from "lucide-react";

function EditorDropdown() {
  const [open, setOpen] = React.useState(false);
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant={"outline"}>
          <PlusIcon className="size-4" />
          <span>Erstellen</span>
        </Button>
      </PopoverTrigger>

      <PopoverContent
        className="w-full max-w-48 space-y-2 bg-sidebar"
        align="end"
      >
        <CreateArticleDialog cb={() => setOpen(false)} />

        <CreateCategoryDialog cb={() => setOpen(false)} />
      </PopoverContent>
    </Popover>
  );
}

export default EditorDropdown;