'use client';

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

interface Props {
  counter: Counter;
  onIncrement: (id: number) => void;
  onDecrement: (id: number) => void;
  onEdit: (counter: Counter) => void;
  onHistory: (id: number) => void;
  onPrefetch?: (id: number) => void;
  editMode: boolean;
}

export default function SortableCounter({ counter, editMode, ...handlers }: Props) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: counter.id,
    data: { type: 'counter', groupId: counter.group_id },
    disabled: !editMode,
  });

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

  return (
    <div ref={setNodeRef} style={style}>
      <CounterCard
        {...handlers}
        counter={counter}
        editMode={editMode}
        dragHandleProps={editMode ? { ...attributes, ...listeners } : undefined}
      />
    </div>
  );
}