import Button from "./Button.tsx";
import {ArrowDown, ArrowUp} from "lucide-react";
import {ButtonType} from "./BasicButtonDefinitions.ts";
import clsx from "clsx";

type MoveButtonControlProps = {
    isUpDisabled: boolean;
    isDownDisabled: boolean;
    onMoveUp(): void;
    onMoveDown(): void;
    className?: string;
}

/**
 * Up and down buttons for reordering list items when not using drag & drop, e.g., on mobile devices.
 * @param isUpDisabled Indicates whether the up button is enabled
 * @param isDownDisabled Indicates whether the down button is enabled
 * @param onMoveUp Method to call when move up is clicked
 * @param onMoveDown Method to call when move down is clicked
 * @param className Custom Style information
 */
export function MoveButtonControl({
                                      isUpDisabled,
                                      isDownDisabled,
                                      onMoveUp,
                                      onMoveDown,
                                      className = ""
                                  }: MoveButtonControlProps) {
    return (
        <div className={clsx(
            "flex flex-col mt-2",
            className
        )}>
            <Button
                icon={ArrowUp}
                onClick={() => onMoveUp()}
                buttonType={ButtonType.TransparentButton}
                disabled={isUpDisabled} // disable if first item
            />
            <Button
                icon={ArrowDown}
                onClick={() => onMoveDown()}
                buttonType={ButtonType.TransparentButton}
                disabled={isDownDisabled}
            />
        </div>
    );
}