import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { GripVertical } from 'lucide-react';
import { RideCreditCard } from './RideCreditCard';
import { UserRideCredit } from '@/types/database';

interface SortableRideCreditCardProps {
  credit: UserRideCredit;
  position: number;
  maxPosition: number;
  viewMode: 'grid' | 'list';
  onUpdate: (creditId: string, updates: Partial<UserRideCredit>) => void;
  onDelete: () => void;
  onReorder: (creditId: string, newPosition: number) => Promise<void>;
}

export function SortableRideCreditCard({
  credit,
  position,
  maxPosition,
  viewMode,
  onUpdate,
  onDelete,
  onReorder,
}: SortableRideCreditCardProps) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: credit.id });

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

  return (
    <div ref={setNodeRef} style={style} className="flex gap-2 items-start">
      {/* Drag handle - external to card */}
      <div
        {...attributes}
        {...listeners}
        className="flex-shrink-0 cursor-grab active:cursor-grabbing p-2 rounded-md bg-background border hover:bg-accent transition-colors self-stretch flex items-center"
      >
        <GripVertical className="w-4 h-4 text-muted-foreground" />
      </div>
      
      {/* Card takes remaining space */}
      <div className="flex-1 min-w-0">
        <RideCreditCard
          credit={credit}
          position={position}
          maxPosition={maxPosition}
          viewMode={viewMode}
          isEditMode={true}
          onUpdate={onUpdate}
          onDelete={onDelete}
          onReorder={onReorder}
        />
      </div>
    </div>
  );
}