import React from "react";
import style from './index.less'

interface Props {
    dragProps: {
        draggable: "true";
        key: string;
        onDragStart: (e: React.DragEvent<Element>) => void;
        onDragEnd: (e: React.DragEvent) => void;
    }
    title: string,
    icon: JSX.Element
    disabled?: boolean
}

const DragItem: React.FC<Props> = ({ dragProps, title, icon, disabled }) => {

    const { key, ...otherProps } = dragProps;
    return <div key={key} {...otherProps} {...(disabled ? { draggable: false, className: style.disabled } : {})}>{icon}<span>{title}</span></div>
}

export default React.memo(DragItem)