import { Button } from "../ui/button";
import { LucideIcon } from "lucide-react";

/**
 * 액션 버튼 그룹 컴포넌트
 * 
 * 목록 아이템에서 사용하는 액션 버튼들을 그룹으로 표시합니다.
 * 데스크톱과 모바일에서 각각 다른 스타일로 렌더링됩니다.
 * 
 * @example
 * ```tsx
 * <ActionButtonGroup
 *   actions={[
 *     { icon: Edit, label: "수정", onClick: handleEdit, variant: "default" },
 *     { icon: Trash2, label: "삭제", onClick: handleDelete, variant: "destructive" }
 *   ]}
 *   layout="horizontal"
 *   size="sm"
 * />
 * ```
 */

export interface ActionButton {
  /** 버튼 아이콘 */
  icon: LucideIcon;
  
  /** 버튼 레이블 (모바일에서 표시) */
  label: string;
  
  /** 클릭 핸들러 */
  onClick: (e: React.MouseEvent) => void;
  
  /** 버튼 변형 스타일 */
  variant?: "default" | "outline" | "ghost" | "destructive" | "secondary";
  
  /** 비활성화 여부 */
  disabled?: boolean;
  
  /** 조건부 표시 */
  show?: boolean;
  
  /** 커스텀 className */
  className?: string;
}

export interface ActionButtonGroupProps {
  /** 액션 버튼 목록 */
  actions: ActionButton[];
  
  /** 레이아웃 방향 */
  layout?: "horizontal" | "vertical";
  
  /** 버튼 크기 */
  size?: "sm" | "default" | "lg";
  
  /** 모바일 전용 모드 (레이블 포함) */
  isMobile?: boolean;
  
  /** 추가 className */
  className?: string;
}

export function ActionButtonGroup({
  actions,
  layout = "horizontal",
  size = "sm",
  isMobile = false,
  className = ""
}: ActionButtonGroupProps) {
  // show가 false인 액션 필터링
  const visibleActions = actions.filter(action => action.show !== false);
  
  if (visibleActions.length === 0) {
    return null;
  }
  
  const layoutClass = layout === "horizontal" ? "flex gap-1" : "flex flex-col gap-2";
  const mobileLayoutClass = layout === "horizontal" ? "flex gap-2 flex-wrap" : "flex flex-col gap-2";
  
  // 모바일 모드: 레이블 포함된 큰 버튼
  if (isMobile) {
    return (
      <div className={`${mobileLayoutClass} ${className}`}>
        {visibleActions.map((action, index) => {
          const Icon = action.icon;
          return (
            <Button
              key={index}
              variant={action.variant || "outline"}
              size={size}
              disabled={action.disabled}
              onClick={(e) => {
                e.stopPropagation();
                action.onClick(e);
              }}
              className={`flex-1 min-w-[100px] h-11 ${action.className || ""}`}
            >
              <Icon className="h-4 w-4 mr-2" />
              {action.label}
            </Button>
          );
        })}
      </div>
    );
  }
  
  // 데스크톱 모드: 아이콘만 표시하는 작은 버튼
  return (
    <div className={`${layoutClass} ${className}`}>
      {visibleActions.map((action, index) => {
        const Icon = action.icon;
        return (
          <Button
            key={index}
            variant={action.variant || "ghost"}
            size={size}
            disabled={action.disabled}
            onClick={(e) => {
              e.stopPropagation();
              action.onClick(e);
            }}
            className={action.className || ""}
          >
            <Icon className="h-4 w-4" />
            <span className="sr-only">{action.label}</span>
          </Button>
        );
      })}
    </div>
  );
}
