type ActionMode =
    | 'create'
    | 'update';

type ActionButtonGroupProps = {
    mode: ActionMode;
    disabled?: boolean;

    onCreate?: () => void;
    onUpdate?: () => void;
    onDelete?: () => void;
    onList?: () => void;
};

export const ActionButtonFormGroup = ({
                                      mode,
                                      disabled = false,
                                      onCreate,
                                      onUpdate,
                                      onDelete,
                                      onList
                                  }: ActionButtonGroupProps) => {

    return (
        <div className="btn_wrap">
            <div className="left">
                {mode === 'update' && (
                    <button
                        type="button"
                        className="btn line red xlarge"
                        onClick={onDelete}
                        disabled={disabled}
                    >
                        삭제
                    </button>
                )}
            </div>

            <div className="right">

                {mode === 'create' && (
                    <button
                        type="button"
                        className="btn fill primary xlarge"
                        onClick={onCreate}
                        disabled={disabled}
                    >
                        등록
                    </button>
                )}

                {mode === 'update' && (
                    <button
                        type="button"
                        className="btn fill primary xlarge"
                        onClick={onUpdate}
                        disabled={disabled}
                    >
                        수정
                    </button>
                )}

                <button
                    type="button"
                    className="btn xlarge fill gray"
                    onClick={onList}
                    disabled={disabled}
                >
                    목록
                </button>
                
            </div>
        </div>
    );
};