"use client";

import * as React from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";

export interface SortableGroupProps {
  groupId: string;
  disabled: boolean;
  children: (isDragging: boolean, dragHandleProps: React.HTMLAttributes<HTMLElement>) => React.ReactNode;
}

/**
 * A wrapper for Kanban column groups that makes them sortable/draggable.
 * It uses the `useSortable` hook from dnd-kit and provides the necessary
 * attributes and listeners to its children via a render prop.
 */
export function SortableGroup({ groupId, disabled, children }: SortableGroupProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    setActivatorNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({
    id: `group-${groupId}`,
    disabled,
  });

  const style: React.CSSProperties = {
    transform: CSS.Translate.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  return (
    <div ref={setNodeRef} style={style}>
      {children(isDragging, {
        ...attributes,
        ...listeners,
        ...setActivatorNodeRef,
      })}
    </div>
  );
}