'use client';

import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import GroupSection from './GroupSection';
import { Counter } from './CounterCard';
import { Group } from './CounterModal';

interface Props {
  group: Group;
  counters: Counter[];
  onIncrement: (id: number) => void;
  onDecrement: (id: number) => void;
  onEdit: (counter: Counter) => void;
  onHistory: (id: number) => void;
  onPrefetch?: (id: number) => void;
  editMode: boolean;
  onRenameGroup: (group: Group) => void;
  onDeleteGroup: (id: number) => void;
}

export default function SortableGroupSection({ group, editMode, ...props }: Props) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: `grp-${group.id}`,
    data: { type: 'group' },
    disabled: !editMode,
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.4 : 1,
  };

  return (
    <div ref={setNodeRef} style={style}>
      <GroupSection
        group={group}
        editMode={editMode}
        dragHandleProps={editMode ? { ...attributes, ...listeners } : undefined}
        {...props}
      />
    </div>
  );
}