import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { QuestionCard } from './QuestionCard';
import { Question } from '../types';

interface SortableQuestionCardProps {
  question: Question;
  index: number;
  onEdit: () => void;
  onDelete: () => void;
  isExpanded: boolean;
  onToggleExpand: () => void;
}

export const SortableQuestionCard: React.FC<SortableQuestionCardProps> = ({
  question,
  index,
  onEdit,
  onDelete,
  isExpanded,
  onToggleExpand
}) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging
  } = useSortable({ id: question.id });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    zIndex: isDragging ? 50 : undefined,
    position: 'relative' as const
  };

  return (
    <div ref={setNodeRef} style={style} {...attributes}>
      <QuestionCard
        question={question}
        index={index}
        onEdit={onEdit}
        onDelete={onDelete}
        isExpanded={isExpanded}
        onToggleExpand={onToggleExpand}
        isDragging={isDragging}
        dragListeners={listeners}
      />
    </div>
  );
};