import React, { useState } from 'react';

const DragAndDropList: React.FC = () => {
    const [items, setItems] = useState<string[]>(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
    const [draggedItemIndex, setDraggedItemIndex] = useState<number | null>(null);

    const handleDragStart = (index: number) => {
        setDraggedItemIndex(index);
    };

    const handleDragOver = (index: number) => {
        if (index !== draggedItemIndex && draggedItemIndex !== null) {
            const newItems = [...items];
            const draggedItem = newItems[draggedItemIndex];
            newItems.splice(draggedItemIndex, 1);
            newItems.splice(index, 0, draggedItem);
            setItems(newItems);
            setDraggedItemIndex(index);
        }
    };

    const handleDrop = () => {
        setDraggedItemIndex(null);
    };

    return (
        <div>
            {items.map((item, index) => (
                <div
                    key={index}
                    draggable
                    onDragStart={() => handleDragStart(index)}
                    onDragOver={() => handleDragOver(index)}
                    onDrop={handleDrop}
                    style={{
                        padding: '8px',
                        margin: '4px',
                        border: '1px solid #ccc',
                        backgroundColor: '#f9f9f9',
                        cursor: 'move',
                        userSelect: 'none'
                    }}
                >
                    {item}
                </div>
            ))}
        </div>
    );
};

export default DragAndDropList;