import { IconDraggable, Toggler } from '@/components';
import { classNames } from '@/utils/classNames';

export type TDndAttributeProps = {
  title: string;
  toggleAction: () => void;
  className?: string;
};

export function DndAttribute({ title, toggleAction, className = '' }: TDndAttributeProps) {
  return (
    <div
      className={classNames(
        'border border-solid border-gray-ui-300 rounded-[3px] py-[5px] pr-[15px] pl-[8px] flex items-center',
        className,
      )}
    >
      <IconDraggable className="mr-3" />
      <span>{title}</span>
      <span className="ml-auto">
        <Toggler theme={'light'} onChange={toggleAction} />
      </span>
    </div>
  );
}