"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export interface DropdownAppItem {
  label: string;
  icon?: React.ReactNode;
  onClick?: () => void;
  className?: string;
  disabled?: boolean;
}

export interface DropdownAppSection {
  /** Opsional label untuk group */
  label?: string;
  items: DropdownAppItem[];
}

interface DropdownAppProps {
  /** Elemen trigger — tombol, avatar, dll */
  trigger: React.ReactNode;
  /** Sections dipisahkan oleh separator otomatis */
  sections: DropdownAppSection[];
  align?: "start" | "center" | "end";
  side?: "top" | "bottom" | "left" | "right";
  className?: string;
}

/**
 * Wrapper DropdownMenu siap pakai.
 * - Render sections dengan separator otomatis antar-section
 * - Mendukung label group opsional per section
 * - Trigger terima ReactNode apapun
 */
export function DropdownApp({
  trigger,
  sections,
  align = "end",
  side = "bottom",
  className,
}: DropdownAppProps) {
  const triggerEl = React.isValidElement(trigger)
    ? trigger
    : <button>{trigger}</button>;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={triggerEl} />
      <DropdownMenuContent align={align} side={side} className={cn("w-48", className)}>
        {sections.map((section, si) => (
          <React.Fragment key={si}>
            {si > 0 && <DropdownMenuSeparator />}
            <DropdownMenuGroup>
              {section.label && (
                <DropdownMenuLabel>{section.label}</DropdownMenuLabel>
              )}
              {section.items.map((item, ii) => (
                <DropdownMenuItem
                  key={ii}
                  onClick={item.onClick}
                  disabled={item.disabled}
                  className={item.className}
                >
                  {item.icon}
                  {item.label}
                </DropdownMenuItem>
              ))}
            </DropdownMenuGroup>
          </React.Fragment>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}