"use client";

import { Fragment } from "react";
import type { LucideIcon } from "lucide-react";
import { MoreHorizontal } from "lucide-react";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export type MenuAction = {
  id: string;
  label: string;
  icon?: LucideIcon;
  variant?: "default" | "danger";
  disabled?: boolean;
  dividerBefore?: boolean;
};

export type ContextMenuProps = {
  label?: string;
  actions: MenuAction[];
  onAction?: (action: MenuAction) => void;
};

export function ContextMenu({ label = "Acciones", actions, onAction }: ContextMenuProps) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" aria-label={label}>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>{label}</DropdownMenuLabel>
        {actions.map((action, index) => {
          const needsDivider =
            action.dividerBefore || (index > 0 && action.variant === "danger");

          return (
            <Fragment key={action.id}>
              {needsDivider ? <DropdownMenuSeparator /> : null}
              <DropdownMenuItem
                onSelect={() => onAction?.(action)}
                disabled={action.disabled}
                className={cn(
                  "gap-2",
                  action.variant === "danger" && "text-destructive focus:text-destructive"
                )}
              >
                {action.icon ? <action.icon className="h-4 w-4" /> : null}
                {action.label}
              </DropdownMenuItem>
            </Fragment>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}