Drag & Drop Ghost

'use client';
import { motion } from 'framer-motion';
import { GripVertical } from 'lucide-react';

export function DragDropGhost({ isDragging = false }: { isDragging?: boolean }) {
  return (
    <div className="w-full max-w-sm space-y-3">
      <div className="rounded-xl border border-stone-200 bg-white p-4 shadow-sm">
        Review roadmap
      </div>

      <div className="relative h-14">
        <div className="absolute inset-0 rounded-xl border-2 border-dashed border-stone-200 bg-stone-50 opacity-60" />
        <motion.div
          animate={
            isDragging
              ? { y: -18, x: 8, scale: 1.04, boxShadow: '0 18px 32px rgba(15,23,42,.16)' }
              : { y: 0, x: 0, scale: 1, boxShadow: '0 1px 2px rgba(15,23,42,.08)' }
          }
          transition={{ type: 'spring', stiffness: 420, damping: 30 }}
          className="absolute inset-x-0 flex cursor-grab items-center gap-3 rounded-xl border border-stone-200 bg-white p-4"
        >
          <GripVertical className="h-4 w-4 text-stone-400" aria-hidden />
          <span className="text-sm font-medium text-stone-800">Update pricing copy</span>
        </motion.div>
      </div>
    </div>
  );
}