"use client";

import React from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { MoreHorizontal, Plus, Pencil, Trash2, FolderPlus } from "lucide-react";

interface CategoryActionMenuProps {
  categoryId: string;
  categoryName: string;
  onAddChild: (id: string, name: string) => void;
  onEdit: (id: string, name: string) => void;
  onDelete: (id: string, name: string) => void;
  asChild?: boolean;
}

export const CategoryActionMenu = ({
  categoryId,
  categoryName,
  onAddChild,
  onEdit,
  onDelete,
  asChild = false,
}: CategoryActionMenuProps) => {
  const trigger = asChild ? (
    <Button variant="ghost" className="h-8 w-8 p-0">
      <span className="sr-only">Menü öffnen</span>
      <MoreHorizontal className="h-4 w-4" />
    </Button>
  ) : (
    <Button variant="ghost" className="h-6 w-6 p-0 hover:bg-muted">
       <MoreHorizontal className="h-3 w-3 text-muted-foreground" />
    </Button>
  );

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Aktionen</DropdownMenuLabel>
        <DropdownMenuItem onClick={() => onAddChild(categoryId, categoryName)}>
          <FolderPlus className="mr-2 h-4 w-4" />
          Unterkategorie erstellen
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => onEdit(categoryId, categoryName)}>
          <Pencil className="mr-2 h-4 w-4" />
          Bearbeiten
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem 
            onClick={() => onDelete(categoryId, categoryName)}
            className="text-destructive focus:text-destructive"
        >
          <Trash2 className="mr-2 h-4 w-4" />
          Löschen
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};