import { useSortable } from "@dnd-kit/sortable";
import { FaArrowsAlt } from "react-icons/fa";
import { CSS } from '@dnd-kit/utilities';

const SortableSection: React.FC<{
    id: string;
    children: React.ReactNode;
}> = ({ id, children }) => {
    const {
        attributes,
        listeners,
        setNodeRef,
        transform,
        transition,
        isDragging,
    } = useSortable({ id });

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

    return (
        <div ref={setNodeRef} style={style} className="flex items-center mb-2 bg-white p-4 rounded shadow">
            <div {...attributes} {...listeners} className="cursor-move mr-2">
                <div className="cursor-move mr-3 p-2 rounded bg-gray-200 text-gray-500 hover:bg-gray-300">
                    <FaArrowsAlt size={16} />
                </div>
            </div>
            <div className="flex-grow">{children}</div>
        </div>
    );
};

export default SortableSection;
